CSS3:奇数・偶数番目の要素を指定する。

goto_jp 880views 更新:2014年1月22日

CSS3の「nth-child」セレクタを使います。

.dataTable tr:nth-child(even) {~}  //偶数番目のtrを指定
.dataTable tr:nth-child(odd) {~}   //奇数番目のtrを指定

「nth-child」自体は「親要素から見てn番目」を指定するセレクタで、下記のようにも扱えます。

.box p:nth-child(3) {~}     //3番目の<p>を指定
.box p:nth-child(3n) {~}    //3の倍数の<p>を指定
.box p:nth-child(3n+1) {~}  //3の倍数+1(1,4,7~)の<p>を指定

一定フォーマットで出力するテーブルやリストなど、細かくクラスを振る必要が無くなるのでコードの軽量化も望めます。

tr:nth-child(0) th { //最初の行の<th>の文字を赤く
  color:#ff0000;
}
tr:nth-child(even) td { //偶数行のセルに背景を付ける
  background-color: #f0f0f0;
}

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません