E:nth-child(n)

ある要素のn番目の子である E要素に対してスタイルが適用されます。

n の部分には、an+b の形式や odd 、even も指定できます。 n は整数 (正、0) 、 ab は整数 (正、負、0) で指定します。 an+b の形式では、例えば、ab が 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)

Enab など斜体は仮の名前です。

上に戻る