目次リスト(ul・ol・li)の一行目だけにCSSを適用する方法メモ【TOC+】

情報をシェアしよう

リスト・箇条書きの「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の基本解説・チュートリアル

まとめ


孫要素以下に影響しないように、「子セレクタ(>)」ってやつで区切ればいいんだね!

孫の面倒までは見切れないときに使っていきたいですね(?)


今回は以上です。良きCSSライフを────ではまたφ(・ω・ )

スポンサーリンク

情報をシェアしよう

筆者をフォローしよう