CSS セレクタの指定

奇数行、偶数行だけスタイルを指定したい時は
奇数は:nth-child(odd)、偶数は:nth-child(even)を使います。

html

<ul>
     <li>リスト1</li>
     <li>リスト2</li>
     <li>リスト3</li>
     <li>リスト4</li>
     <li>リスト5</li> 
</ul>

css

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

これで奇数行、偶数行のスタイルを変えられます。



この記事が気に入ったらサポートをしてみませんか?