nth系の疑似クラスを使用したn番目(x番目)を指定する方法とまとめ【CSS】

CSSでn番目(x番目)を指定してスタイルを変更するという事は少なくありません。
そうした時に、オーソドックスな:nth-child()だけでは対処できない場合もありますので、いろいろなnth系の疑似クラスをまとめてみました。

基本的なソース

今回使用する基本的なHTMLやCSSは以下となります。

<ul>
    <li>1番目の要素</li>
    <li>2番目の要素</li>
    <li>3番目の要素</li>
    <li>4番目の要素</li>
    <li>5番目の要素</li>
</ul>

li {
    background-color: #F4F4F4;
}

CSSでは、その他にフォントサイズやpaddingなどの共通のスタイルを使用しています。
上記のCSSを使用したのが以下となります。

n番目の指定の方法は多くあります。
以下にその具体的な指定パターンをまとめましたので参考にしてみてください。

最初の要素

:first-child

li:first-child {
    color: #FFF;
    background-color: #333;
}

最後の要素

:last-child

li:last-child {
    color: #FFF;
    background-color: #333;
}

最初からn番目の要素

:nth-child(n)
※「n」には数字が入ります。

li:nth-child(2) {
    color: #FFF;
    background-color: #333;
}

最後からn番目の要素

:nth-last-child(n)
※「n」には数字が入ります。

li:nth-last-child(2) {
    color: #FFF;
    background-color: #333;
}

最初からx番目の要素まで

:nth-child(-n+x)
※「x」には数字が入ります。

li:nth-child(-n+3) {
    color: #FFF;
    background-color: #333;
}

最後からx番目の要素まで

:nth-last-child(-n+x)
※「x」には数字が入ります。

li:nth-last-child(-n+3) {
    color: #FFF;
    background-color: #333;
}

最初からx番目以降の要素

:nth-last-child(-n+x)
※「x」には数字が入ります。

li:nth-last-child(-n+4) {
    color: #FFF;
    background-color: #333;
}

最後からx番目以前の要素

:nth-last-child(n+x)
※「x」には数字が入ります。

li:nth-last-child(n+2) {
    color: #FFF;
    background-color: #333;
}

偶数の要素

:nth-child(even) または :nth-child(2n)

li:nth-child(even) {
    color: #FFF;
    background-color: #333;
}

奇数の要素

:nth-child(odd) または :nth-child(2n-1)

li:nth-child(odd) {
    color: #FFF;
    background-color: #333;
}

xの倍数の要素

:nth-child(xn)
※「x」には数字が入ります。

li:nth-child(3n) {
    color: #FFF;
    background-color: #333;
}

:nth-child()と:nth-of-type()の違いについて

各疑似クラスのパターンを紹介しましたが、これらの疑似クラスは同じ親要素内の「全て」の兄弟要素に対して有効となります。
同じ親要素の兄弟要素でも、指定した同じ要素だけを数える:nth-of-type()という疑似クラスも用意されています。
これは、:nth-of-type()の他にも、:first-of-type()や:last-of-type()など、今回紹介した疑似クラスの全てに用意されています。

指定した要素だけを数える:●●-of-type()との違いについて詳しくは、CSSの疑似クラス「nth-child」と「nth-of-type」の違いと使い方について【CSS】をご覧ください。

さいごに

いかがでしたでしょうか。
今回は、nth系の疑似クラスを使用したn番目(x番目)を指定する方法とまとめを解説しました。
なかなか普段は使用しない疑似クラスもありますが、いくつか覚えておくとスムーズにコーディングが進みますので、この機会に覚えてみてください！