今日はCSSの擬似クラスのひとつの:nth-childについてご紹介します。

擬似クラスは他にもたくさんありますが、:nth-childを使うと要素の指定を、順番で指定することができます。何番目の要素、といった指定の仕方ですね。

実際にnth-childの使い方を見ていきます。

:nth-child(数値)

一番基本的な使い方はnth-child()のかっこに数値を入れて、そのまま指定する方法です。

p:nth-child(3)

とすると、3番目のp要素という指定になります。

:nth-child(even)

偶数の要素を指定したい時に使います。

p:nth-child(even)

とすると、偶数番のp要素という指定になります。偶数なので2・4・6・8・・・という順番ですね。

:nth-child(odd)

奇数の要素を指定したい時に使います。

p:nth-child(odd)

とすると、偶数の時と同様に奇数番のp要素という指定になります。奇数なので1・3・5・7・・・という順番の要素に適用されます。

:nth-child(n+数値)

特定の順番以降全てを対象とする時に使います。

p:nth-child(n+3)

とすると、3番目以降全てのp要素が対象になります。

:nth-child(-n+数値)

先ほどの特定の順番以降全てを対象とする時とは逆に、nの前にマイナスをつけると指定した数値までの要素が対象になります。

p:nth-child(-n+3)

とすると、3番目までのp要素が対象となります。

まとめ

というわけで擬似クラス:nth-child()の紹介でした。

順番を利用して要素を指定できると、全ての要素に全て適用せずに一部だけ適用できるのでデザインの幅も広がりますね。ぜひ覚えて使ってみてください!