:nth-child()
特徴：
同じタグやクラス名で他の結果を出せる
例えば、liで三つ表示させた場合、
1番目は青
2番目は赤
3番目は緑
と、できる。
記述例
———————
li:nth-child(1) { color: blue;}
li:nth-child(2) { color: red;}
li:nth-child(3) { color: green;}
———————
メリットは、ほぼ共通CSSだけど色だけ変えたいなどの特定部分を変える際にCSSの記述が短くて済む。
もちろん、1つ1つにクラス名変えてあげて全部記述するのと結果は同じ。
例えば、テーブルなどの表組をして、偶数セルは白、奇数セルはグレー…という時などは処理が楽。
エクセル表みたいなもんですね。
偶数奇数以外にも3つおきとか、2番目だけ何かするとか、5番目から10番目だけ指定とか、
ちょっとプログラミング的な考え方で色々やれるみたいですね。