リスト・箇条書きの「li・ol・ul」、その一行目だけにCSSを適用します。
「>（大なり）」を使います。
「>」は「子セレクタ」と呼びます。子セレクタで区切ることで、「親要素の直接の子要素のみに適用」できます。つまり「孫要素以下」を避けることができます。
参考にさせていただいた記事
目次を見やすくしたい
WordPressの目次プラグイン「Table of Contents Plus（TOC+）」を見やすくするために使いました。
具体的にどうするかというと、
目次の大見出しの上部に十分な余白がないため、小見出しが増えると読みにくい。
これを、
大見出しの上部に十分な余白があり、ひとまとまりでわかりやすい。
こうしました。
CSSの記述例
#toc_container .toc_list > li{
padding-top:15px;
}
CSSは上記のようになります。
子セレクタ「>」で区切ることで、子要素のみに適用できる。つまり「li li」といった孫要素以下への影響をなくすことができます。なおこの場合、親要素は「#toc_container .toc_list」の部分で、子要素は「li」の部分です。
4つある「CSSコンビネータ」のうちの1つ
「CSS？ とりあえずスペースで区切ればいいんでしょ？」と思ってたんですが、どうもそうじゃないみたいですね。
CSSには、「コンビネータ」と呼ばれる「セレクタとの関係を説明するもの」が、計4種類あるようです。子セレクタはそのうちの1つと。
” 4つの異なるコンビネータがあります。
- 子孫セレクタ(space)
- 子供セレクタ(>)
- 隣接兄弟セレクタ(+)
- 一般兄弟セレクタ(~)
CSSコンビネータを知れば、もっとCSSで複雑なことができそうです。
「セレクタ」の意味はこちら
まとめ
孫要素以下に影響しないように、「子セレクタ（>）」ってやつで区切ればいいんだね！
孫の面倒までは見切れないときに使っていきたいですね（？）
今回は以上です。良きCSSライフを────ではまたφ(・ω・ )
▼ WEBプログラミングを学びたいなら
▼ ブログの関連記事
