【CSS3】要素セレクタ
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以降
コメントを残す