CSS :nth-child()について

2021年5月5日 18:46

:nth-child()が間違えやすいところがあったので記述します。

<div class="box">
   <h1>タイトル</h1>
   <p>内容１</p>
   <p>内容２</p>
   <p>内容３</p>
</div>

上記のようなhtmlがあるとします。そこに、


.box:nth-child(3) { 
   cssの内容
}

このようなcssを書くとcssが適応されるのは<p>内容１</p>の部分です。

:nth-child(n)の書き方

まず大前提にnは仮の数字と考え、何か数字や変数が入るわけではありません。

:nth-child(3n) {  
   cssの内容
}

3の倍数にcssを適応させる。3の部分を他の数字にすればその倍数になる。

:nth-child(n + 7) {
   cssの内容
}

要素の中の7番目以降にcssを適応させる。7番目も含む。

:nth-child(-n + 7) {
   cssの内容
}

要素の中の7番目よりも前にcssを適応させる。7番目も含む。

まとめ
nはあくまでも式の表し方であって実際に数字が入るわけではないので気をつける。