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

 

リスト・箇条書きの「li・ol・ul」、その一行目だけにCSSを適用します。


>(大なり)を使います。


「>」は「子セレクタ」と呼びます。子セレクタで区切ることで、「親要素の直接の子要素のみに適用」できます。つまり「孫要素以下」を避けることができます。

 

参考にさせていただいた記事

子セレクタ (E > F)|セレクタ|CSS HappyLife ZERO

 

スポンサーリンク

目次を見やすくしたい

 

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の基本

 

 

まとめ

 


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

 

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


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

 

▼ WEBプログラミングを学びたいなら

 

▼ ブログの関連記事

Simplicity2からCocoonに進化するべき6つの理由と大変だったこと【WordPressテーマ】
【比較】「ブロガー」と「ユーチューバー(YouTuber)」のメリットデメリット
スポンサーリンク
タイトルとURLをコピーしました