:nth-child()
例
code:html
<li>1</li>
<a>2</a>
<li class="foo">3</li>
<li>4</li>
<li>5</li>
<li class="foo">6</li>
<li>7</li>
セレクタに:nth-child(3)と書くと兄弟要素の上から3番目が選択される
例の場合は<li class="foo">3</li>
計算式を書くこともできる
:nth-child(2n+1)と書くと1,3,5,7が選択される
oddと書くと奇数番目の要素が選択される
evenと書くと偶数番目の要素が選択される
:nth-child()の左側に何か書くと、選択される要素を絞り込むことができる
li:nth-child(even)と書くと、偶数番目でかつ<li>タグの要素が選択される
つまり4と6
.foo:nth-child(3)と書くと、3番目でかつclass属性にfooの値がある要素が選択される
fooクラスがついた要素の3番目ではないことに注意