【CSS】最初や最後、n番目にだけ適用する方法

CSSでリストやボックスを連続して作っている時、最後だけボーダーが入らないようにしたい、偶数の部分は色をつけたい等の場合が結構あります。

その場合に個別にクラスを充てたりする方法もありますがCMSで出力されていてhtmlは触れないという時や後からコンテンツの数が増えたりした場合に修正しなければいけません。

擬似 クラスの【 nth-child 】を使えば部分毎にクラスをあてなくてもスマートに対応する事が出来ます。

下記のhtmlの場合

<ul>
        <li>最初の要素</li>
        <li>2番目の要素</li>
        <li>3番目の要素</li>
        <li>4番目の要素</li>
        <li>5番目の要素</li>
        <li>最後の要素</li>
</ul>

最初の要素にだけ適用する

li:first-child{
   ここに適用したいスタイルを入れる
}

最後の要素にだけ適用する

li:last-child{
   ここに適用したいスタイルを入れる
}

奇数番目の要素にだけ適用する

続いて奇数や偶数番目にだけ適用する方法です。
例えば1列ごとに背景色を変えれば視覚的に見やすい表等が作れます。

li:nth-child(odd){
   ここに適用したいスタイルを入れる
}

偶数番目の要素にだけ適用する

li:nth-child(even){
   ここに適用したいスタイルを入れる
}

続いて〇番目だけ、〇番目以降、上から〇番目まで適用する方法です
例えば上から〇番目まで色を変えて目立たせたりといった事が可能です。

上からn番目の要素にだけ適用する

li:nth-child(3){
   ここに適用したいスタイルを入れる
}

(3)で3番目という意味です。

上からnつの要素だけに適用する

li:nth-child(-n+3) {
   ここに適用したいスタイルを入れる
}

(-n+3) で上から3つまでは適用されます。

上からn番目以降の要素にだけ適用する

li:nth-child(n+3) {
   ここに適用したいスタイルを入れる
}

(n+3) で3番目以降に適用されます。

下からn番目の要素にだけ適用する

li:nth-last-child(3){
   ここに適用したいスタイルを入れる
}

(3)で3番目という意味です。

下からn番目以前の要素にだけ適用する

li:nth-last-child(n+3) {
   ここに適用したいスタイルを入れる
}

(n+3) で下から3つ以前の要素に適用されます。

下からnつの要素にだけ適用する

li:nth-last-child(-n+3) {
   ここに適用したいスタイルを入れる
}

(-n+3)下から3つの要素にだけ適用されます。

最後に指定の倍数に適用する方法です。

指定の倍数番目の要素にだけ適用

li:nth-child(3n) {
   ここに適用したいスタイルを入れる
}

(3n)だと3の倍数の要素にだけ適用されます。

もちろん、liだけじゃなく他の要素でも使えますので色々と応用が効きます!