CSSでの奇数や偶数、倍数の指定方法【現役エンジニアが解説】
今回は、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の倍数番目の要素のみ、文字色を青色にしています。