CSS3で奇数、偶数、●番目、●の倍数などに使う書き方

2014.12.27

これまた、よく使う、CSS。

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

</ul>

<ul>

</ul>

1の背景が赤くなります。

li:first-child{
background:#ff0000;
}

li:first-child{

background:#ff0000;

}

6の背景が赤くなります。

li:last-child{
background:#ff0000;
}

li:last-child{

background:#ff0000;

}

偶数の背景が赤くなります　2と4と6ですね。

li:nth-child(even){
background:#ff0000;
}

li:nth-child(even){

background:#ff0000;

}

奇数の背景が赤くなります　1と3と5ですね。

li:nth-child(odd){
background:#ff0000;
}

li:nth-child(odd){

background:#ff0000;

}

3の倍数の背景が赤くなります　3と6ですね。

li:nth-child(3n){
background:#ff0000;
}

li:nth-child(3n){

background:#ff0000;

}

これを覚えているだけで、無駄なclassがいらなくなります。