CSSでの奇数や偶数、倍数の指定方法【現役エンジニアが解説】

PROGRAM

今回は、CSSでの奇数や偶数、倍数の指定方法について、それぞれに分け、簡単に解説していきます。

奇数

奇数番目の要素を指定するには、擬似クラスを使います。

要素:nth-child(odd)で、奇数番目の要素のみに絞り込むことができます。

ul li:nth-child(odd){
    color:red;
}

上記のコードでは、ul要素下のli要素のうち、奇数番目の要素の文字色を赤色にしています。

偶数

偶数番目の要素を指定する際も、擬似クラスを使用します。

要素:nth-child(even)で、偶数番目の要素のみに限定することが可能です。

ul li:nth-child(even){
    color:green;
}

上記のコードでは、ul要素の下のli要素のうち、偶数番目の要素の文字色を緑色にしています。

倍数

ある数の倍数番目の要素を指定する場合も、擬似クラスを用います。

例えば、要素:nth-child(3n)で、3の倍数番目の要素のみを指定することができます。

ul li:nth-child(3n){
    color:blue;
}

上記のコードでは、ul要素の下の階層のli要素のうち、3の倍数番目の要素のみ、文字色を青色にしています。