E:nth-child(n)
ある要素のn番目の子である E要素に対してスタイルが適用されます。
n の部分には、an+b の形式や odd 、even も指定できます。 n は整数 (正、0) 、 a と b は整数 (正、負、0) で指定します。 an+b の形式では、例えば、a と b が 0 よりも大きい場合、子要素を a 個ずつのグループに分け、各グループの b 番目の要素に対してスタイルが適用されます。 odd は 2n+1 と同じ意味、even は 2n と同じ意味です。インデックスは 1 ですので、最初の子を指定したい時は、:nth-child(1) となります。 [nth-child() pseudo-class / CSS3]
example
tr:nth-child(2n+1) { background-color: pink; } /* HTML において table の奇数行を表す */ tr:nth-child(odd) { background-color: pink; } /* 同上 */ tr:nth-child(2n+0) { background-color: skyblue; } /* HTML において table の偶数行を表す */ tr:nth-child(even) { background-color: skyblue; } /* 同上 */
source
<table> <tr><td> 奇数行(2n+1) </td></tr> <tr><td> 偶数行(2n+0) </td></tr> <tr><td> 奇数行(2n+1) </td></tr> <tr><td> 偶数行(2n+0) </td></tr> </table>
display
奇数行(2n+1) |
偶数行(2n+0) |
奇数行(2n+1) |
偶数行(2n+0) |
※ E、n、a、b など斜体は仮の名前です。