nth-child は、CSSセレクタの一種で、特定の位置にある子要素を選択するために使用される擬似クラスです。下記のように使用します。
:nth-child(n)
n は数値を表し、対象となる位置を示します。要素の位置は1から始まり、例えば、最初の子要素は :nth-child(1) 、2番目の子要素は :nth-child(2) と記述します。
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
上記のようなコードがあった時、２番目のliだけ色を変えたい場合、下記のようにCSSを書きます。
ul li:nth-child(2) {
color: blue;
}
また、並びに変化をつけたい時など、奇数、偶数などで設定したい時は偶数は:nth-child(even)、奇数は:nth-child(odd)を使用します。
