Tweet

Pocket

CSS3では、同じ親を持つ子要素「○番目のもの」「最後に出てくるもの」といった条件による指定が可能となります。

例）テーブルの奇数、偶数行で背景色を変える

【使用例（css）】

tr:nth-child(odd) {
　　background-color:#CDCDC1;
　　}

tr:nth-child(even) {
　　background-color:#E8E8E8;
　　}

【使用例（html）】　　

<table>
　　<tr><td>1番目</td></tr>
　　<tr><td>2番目</td></tr>
　　<tr><td>3番目</td></tr>
　　<tr><td>4番目</td></tr>
</table>

nth-childプロパティで子要素の前から○番目、という指定を行っています。
上記例では、親要素に「tr」、条件に「odd」で奇数、「even」で偶数を指定しています。odd、evenの他に奇数、偶数をnを0以上の整数として「2n+1」「2n+0」のように数式で指定することもできます。

他の代表的な要素セレクタには以下のようなものもあります。

nth-child(条件)･･･前から「条件」付きの要素の指定
nth-last-child(条件)･･･後ろから「条件」付きの要素の指定
nth-of-type(条件)･･･同一の要素を対象として、前から「条件」付きの要素の指定
nth-last-type(条件)･･･同一の要素を対象として、後ろから「条件」付きの要素の指定
first-child･･･最初の要素の指定
last-child･･･最後の要素の指定

【対応ブラウザ】
FireFox3.6以降、Opera9.5以降、Safari3以降、Mobile Safari3以降、Chrome4以降