さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【CSS3】要素セレクタ

Pocket
LINEで送る

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以降

カテゴリー:HP制作, css

コメントを残す

コメント内容