acky info

連絡先

tips

web関係、制作関係でのよしなしごとを書いています。

CSSテクニック

positionを使ったCSSテクニック

フォームに関するCSSテクニック

疑似クラスを使ったCSSテクニック

リストのCSSテクニック

tableに関するCSSテクニック

左寄せ、中央寄せ、右寄せのCSSテクニック

floatを使ったCSSテクニック

liやtr、tdの背景色を交互に付ける

ads

2010/7/8 計算式をリスト化

リストや表を見やすくするための方法として、liやセルの背景色を交互に付ける方法があります。
これをCSSで表現するためには、疑似クラスの:nth-child(n)を使います。

:nth-child()は()の中に奇数の場合はodd、偶数の場合はevenを記述します。
また()の中には数字や計算式を入れる事も可能です。

  • nth-child(2)
    2番目のみに適用します。
  • nth-child(2n)
    (2*0)=0、(2*1)=2、(2*2)=4という計算を繰り返すため偶数に背景色が付きます。
  • nth-child(2n+1)
    (2*0+1)=1、(2*1+1)=3、(2*2+1)=5という計算を繰り返すため奇数に背景色が付きます。
  • nth-child(2n-1)
    (2*0-1)=-1、(2*1-1)=1、(2*2-1)=3という計算を繰り返すため奇数に背景色が付きますが、この計算式を使うことはあまり無いでしょう。

適用される順番は、liの場合は最初のliから、trの場合は最初のtrから、th、tdの場合はtrごとのth、tdから適用されます。
したがって、tableで縦に背景色を付ける場合はtrに、横に背景色を付ける場合はth、tdに指定するように記述します。

li:nth-child(even){
background:#CCCCCC;
}

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

td:nth-child(even){
background:#CCCCCC;
}

  • li_01
  • li_02
  • li_03
  • li_04
  • li_05
td_01 td_02
td_01 td_02
td_01 td_02
td_01 td_02
td_01 td_02
td_01 td_02 td_03 td_04 td_05
td_01 td_02 td_03 td_04 td_05
td_01 td_02 td_03 td_04 td_05

また、:nth-child()はIE8以下には対応してないので、jqueryを読み込んだ後にaddclassなどで対応する必要があります。

$(function() {
$("table tr:nth-child(even)")
.addClass("tr_even");
});

.tr_even{
background:#CCCCCC;
}

リストのCSSテクニック

tableに関するCSSテクニック

疑似クラスを使ったCSSテクニック

Copyright (C) acky. All Rights Reserved.