CSS3で偶数・奇数・n番目の装飾

カテゴリー:CSS

CSS3で偶数・奇数・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がよく使うのはこんなもんかな
メモ以上!