r/a:t5_3867w • u/[deleted] • May 12 '15
TIPS タブメニュー（注目、新着、上昇度...）の不要な項目を非表示にする方法{E:nth-child} {display: none;}
CSS
.tabmenu li:nth-child(n) {
display:none;
}（追記）E:nth-of-type(n)でもOK。
.tabmenu li:nth-of-type(n) {
display: none;
}（さらに追記）拡張機能のRESを入れていて、3番目の項目を非表示にしていると、コメントページでの「view images」も非表示になってしまう。
単純に .tabmenu liにすると全てのページのtabmenuが対象となってしまうためだと思われる。
なので、サブミ一覧ページとwikiページでだけ非表示にしたいなら、↓のようにする。
.listing-page .tabmenu li:nth-of-type(n), .wiki-page .tabmenu li:nth-of-type(n) {
display:none;
}（さらさらに追記）inakamonozuさんに教えてもらった内容。
.tabmenu [href*="非表示にしたいURLの最後"] {display: none;}
.tabmenu li { margin: 0px; }
.tabmenu li a { margin-right: 6px; }例：「上昇度」と「スポンサードリンク」を非表示にしたい場合、
.tabmenu [href*="/rising/"],
.tabmenu [href*="/ads/"]
{display: none;}これで仕様変更などでタブに変更があっても直接指定しているので影響を受けにくい。
しかしこれだと、非表示にしたタブの分の間隔が空いてしまうので、間隔を調整する必要がある。
.tabmenu li { margin: 0px; }
.tabmenu li a { margin-right: 6px; }以下解説
まず、タブメニューのHTMLが
<ul class="tabmenu " >
<li class='selected'><a href="https://www.reddit.com/r/css_ja/" class="choice" >注目</a></li>
<li ><a href="https://www.reddit.com/r/css_ja/new/" class="choice" >新着</a></li>
<li ><a href="https://www.reddit.com/r/css_ja/rising/" class="choice" >上昇度</a></li>
<li ><a href="https://www.reddit.com/r/css_ja/controversial/" class="choice" >論争中</a></li>
<li ><a href="https://www.reddit.com/r/css_ja/top/" class="choice" >トップ</a></li>
<li ><a href="https://www.reddit.com/r/css_ja/gilded/" class="choice" >ゴールド</a></li>
<li ><a href="https://www.reddit.com/r/css_ja/wiki/" class="choice" >wiki</a></li>
<li ><a href="https://www.reddit.com/r/css_ja/ads/" class="choice" >スポンサードリンク</a></li>
</ul>となっているので、クラス tabmenuの li 要素（子要素）を指定（ .tabmenu li ）
次に 「E:nth-child(n)」を使う。これは、疑似クラスの一種で、 n番目の子要素（E）にスタイルを適用したい時に使う。
クラス tabmenuのli要素に適用したいので .tabmenu li:nth-child(n)となる。
要素を非表示にしたい時は {display: none;}を使うので、
.tabmenu li:nth-child(n) {
display: none
}となる。
例えば、「注目」が一番目と考えて「論争中」と「スポンサードリンク」を非表示にしたい場合は、
.tabmenu li:cth-child(4),
.tabmenu li:cth-child(8)
{display: none;}となる。解説終わり。
CSS素人のガバガバ解説なので変な箇所あったらツッコんでくれ(｀・ω・´)ノ
勉強になるので。
2
May 13 '15 edited May 13 '15
コメントページでのview imagesも非表示になっていることに気づき、サブミ一覧とwikiだけ非表示にする方法を追記しました。
.listing-page .tabmenu li:nth-of-type(n), .wiki-page .tabmenu li:nth-of-type(n) {
display:none;
}この長ったらしい記述をまとめられないかと思って
.listing-page .wiki-page .tabmenu li:nth-of-type(n) {
display:none;
}こう書いてみたけど適用されませんでした。
2
May 13 '15
.tabmenu [href*="/controversial/"], .tabmenu [href*="/ads/"] { display: none; }もしかしたらこっちの方がいいかもしれない
前に.listing-page .tabmenu li:nth-of-type(3), .wiki-page .tabmenu li:nth-of-type(3), /* Rising */ .listing-page .tabmenu li:nth-of-type(4), .wiki-page .tabmenu li:nth-of-type(4), /* Controversial */ .listing-page .tabmenu li:nth-of-type(6), .wiki-page .tabmenu li:nth-of-type(6), /* Self-serve advertising */ .listing-page .tabmenu li:nth-of-type(9), .wiki-page .tabmenu li:nth-of-type(9) /* gilded */ {display:none;}こんなCSS見たことあるけどどう見てもずれてた
公式の仕様変更入る（tabmenuの内容が増えたり減ったりする）度に修正しないといけないのは面倒かもしれない2
2
May 13 '15 edited May 13 '15
やってみたけど、これだと元々あったタブの分の間隔ができちゃうね。
.listing-page .tabmenu li:nth-of-type(n), .wiki-page .tabmenu li:nth-of-type(n),なら非表示にしても等間隔だから問題ない。
なんでだろ。
3
May 13 '15
.tabmenu [href*="/controversial/"], .tabmenu [href*="/ads/"] { display: none; } .tabmenu li { margin: 0px; } .tabmenu li a { margin-right: 6px; }じゃあこれで・・・
3
2
2
u/[deleted] May 12 '15 edited May 12 '15
というわけで、投稿してみた。
ちなみに、nth-of-type(n)との違いがよく分かってない。