【CSS】liの背景を縞々にする

liやセルの背景色を交互に付ける

疑似クラスの:nth-child(n)を使います

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:nth-child(even){
background:#CCCCCC;
}

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

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

古いIEは非対応です。