CSSだけで何番目の要素のみにスタイルを指定する、ことを多用するコーディング案件がありました。
nth-child()やnth-of-type()で対応できますが、使う度に調べてしまうので、備忘録として書きます。
CSSで何番目はnth-childかnth-of-type
CSSで何番目の要素を指定する方法は、nth-child()疑似要素もしくはnth-of-type()疑似要素を使います。
どちらも、何番目の要素のみにスタイルを当てます。
何番目の指定方法は多岐にわたり、ここを調べることが多いので、
具体的な指定パターンを下記にまとめました。
（X＝数字、下記サンプルではX=3）
| nth-child | nth-of-type | |
|---|---|---|
 | :first-child | :first-of-type |
 | :last-child | :last-of-type |
 | :nth-child(X) | :nth-of-type(X) |
 | :nth-last-child(X) | :nth-last-of-type(X) |
 | :nth-child(-n+X) | :nth-of-type(-n+X) |
 | :nth-last-child(-n+X) | :nth-last-of-type(-n+X) |
 | :nth-child(n+X) | :nth-of-type(n+X) |
 | :nth-last-child(n+X) | :nth-last-of-type(n+X) |
 | :nth-child(Xn) | :nth-of-type(Xn) |
これで大体のパターンを網羅していると思います。
基本的に、前から何番目の要素を指定したければnth-child、後ろから何番目の要素を指定したければnth-last-childを使いましょう。
この他に、偶数・奇数の場合のコードもありますが、nth-child(2n) / nth-child(2n+1)で代用できるため省略します。
nth-childとnth-of-typeの違い
nth-child、nth-of-typeと2通りのコードが出てきました。
先程のサンプルを見る限りどちらを使っても同じ結果と思うかもしれませんが、この2つは用途が明確に違います。
nth-childは単純に何番目の要素を対象にしているのに対し、nth-of-typeは指定した要素以外は数えません。
具体的な例を出しましょう。
<!-- 2番目のPタグの文字色を赤くしたい -->
<div class="sample-inner">
<h2>2番目のpを赤くしたい<br>(nth-of-type)</h2>
<p>1番目</p>
<p>2番目</p>
<p>3番目</p>
</div>
上記のようなHTMLに対し2番目のPタグの文字色のみを赤くしたい場合、nth-child()を使って下記のコードを書くとどうなるでしょうか。
/* CSS */
/sample-inner p:nth-child(2) { color: #f00; }
実はこの場合1番目のPタグの文字色が赤くなります。
nth-childは要素を単純に数えた数を指定するため「2番目のPタグ」のような指定はできないためです。
h2タグが最初にあるため、2番目の要素は1つめのPタグとなるからです。
nth-of-typeは指定した要素のみを数えるため、「2番目のPタグ」の指定にも対応できます。
/* CSS */
/sample-inner p:nth-of-type(2) { color: #f00; }
初級者にありがちなミスで、nth-childのみを覚えてしまいnth-childでは対応できないケースに当たることがあります。
nth-childとnth-of-typeそれぞれの特性を理解しましょう。
リストなど、子要素が同一要素のみであればnth-childを使います。
子要素が複数タグで成り立っている場合の何番目指定はnth-of-typeを使います。
まとめ
今回はCSSで何番目を指定、について解説しました。
単純な何番目の指定は検索すればすぐに出てきますが、
何番目以降や以前の要素のみ指定する方法は検索を工夫しないと出てきません。
現場ではカードをFlexboxで並べたときに最後の列のカードの余白は消したい、などでよく活用されます。
まぁGridを使えばそこらへん考えなくても良いのですが、これはまた別の機会にお話しましょう。
