CSSでの「X番目」指定

CSSで「X番目」「X番目以降」などの要素を指定して、スタイルを設定したい時に使う擬似クラスをまとめました。

いろいろな「X番目」を指定する方法

	nth-child	nth-of-type
最初の要素	:first-child	:first-of-type
最後の要素	:last-child	:last-of-type
最初からX番目の要素	:nth-child(X)	:nth-of-type(X)
最後からX番目の要素	:nth-last-child(X)	:nth-last-of-type(X)
最初からX番目まで	:nth-child(-n+X)	:nth-of-type(-n+X)
最後からX番目まで	:nth-last-child(-n+X)	:nth-last-of-type(-n+X)
X以降	:nth-child(n+X)	:nth-of-type(n+X)
X以前	:nth-last-child(n+X)	:nth-last-of-type(n+X)
Xの倍数	:nth-child(Xn)	:nth-of-type(Xn)
奇数番目の要素	:nth-child(odd)	:nth-of-type(odd)
偶数番目の要素	:nth-child(even)	:nth-of-type(even)

nth-childとnth-of-typeの違い

上記の指定法ではnth-childとnth-of-typeの2種類の方法が出てきました。

ぱっと見た状態ではどちらの記述でも同じ結果になるように見えるかもしれませんが、
この2つの記述は用途が異なります。

nth-child は親要素から見た子要素に対して、全ての子要素を対象にX番目の要素を指定します。

それに対し、nth-of-type は指定した要素に対してX番目の要素を指定することができます。

nth-child を使って「2番目のp要素」を指定する

次のようなHMTLファイルがあるとします

<div class="container">
    <h1>index</h1>
    <p>Text 1</p>
    <p>Text 2</p>
    <p>Text 3</p>
    <p>Text 4</p>
    <p>Text 5</p>
</div>

このHTMLに対して、2番目のp要素の文字色をオレンジになるように指定したい場合、
nth-child を使って指定すると、次のようになります

See the Pen 30-1 by subaru (@subaru_works) on CodePen.

2番目のp要素に対してスタイルを指定したかったのですが、1番目のp要素に文字色のスタイルがあたってしまいました。

nth-child は子要素の数を単純に数えるため、「子要素の2番目の要素」は
「h1要素の次のp要素（p要素の中では1番目）」を指定した事になってしまいます。

このため、子要素に複数のタグが存在する場合は「2番目のp要素」のような指定はできません。

nth-of-type を使って「2番目のp要素」を指定する

そこで、このような場合は nth-of-type を使ってスタイルを指定します。

See the Pen 30-1 by subaru (@subaru_works) on CodePen.

X番目の指定に nth-of-type の疑似要素を利用しました。

すると、先程の nth-child では意図した通りに指定できなかった「2番目のp要素」にスタイルを当てることができるようになりました。

この様に、リスト要素などの子要素が同一要素のみの場合は nth-child を使い、
子要素に複数のタグが存在する場合は nth-of-type を使います。

まとめ

今回はCSSでの「X番目」指定方法についてご紹介しました。

実際にはmargin やpaddingなどの指定時に、これらの擬似クラスを利用することが多くあります。

これらの利用法を知っていると、一見複雑そうに見えるスタイルもあっという間に設定することができるようになるかと思います。