CSS3で偶数・奇数・n番目の装飾
カテゴリー:CSSCSS3で偶数・奇数・n番目の装飾する方法を自分のためにもメモ
使い方は簡単、ただしCSS3に対応していないブラウザには使えないから、要件によっては使えない
偶数・奇数の書き方
#list li:nth-child(2n){ //2 x n 偶数の場合 } #list li:nth-child(2n+1){ //(2xn) + 1 奇数の場合 }
n番目(今回は5番目)、先頭から3つまで、3つ目以降
#list li:nth-child(5){ //5番目のみ } #list li:nth-child(-n+3){ //先頭から3つ目まで } #list li:nth-child(n+4){ //先頭から3つ目以降 }
先頭、末尾
#list li:first-child(){ //先頭のみ } #list li:last-child(){ //末尾のみ }
MaMoTaKuがよく使うのはこんなもんかな
メモ以上!