html
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
css
1の背景が赤くなります。
li:first-child{
background:#ff0000;
}
6の背景が赤くなります。
li:last-child{
background:#ff0000;
}
偶数の背景が赤くなります 2と4と6ですね。
li:nth-child(even){
background:#ff0000;
}
奇数の背景が赤くなります 1と3と5ですね。
li:nth-child(odd){
background:#ff0000;
}
3の倍数の背景が赤くなります 3と6ですね。
li:nth-child(3n){
background:#ff0000;
}
これを覚えているだけで、無駄なclassがいらなくなります。
レスポンシブで作成してるときもかなり使えます。