奇数、偶数、n番目を指定するcss

これも毎回調べてしまうのでメモ(背景を黄色に指定する設定)

奇数

:nth-child(odd){
background:#ff0;
}

偶数

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

n番目

/*3番目のとき*/
:nth-child(3){
background:#ff0;
}

後ろからn番目

/*後ろから3番目のとき*/
:nth-last-child(3){
background:#ff0;
}

最初

:first-child{
background:#ff0;
}

最後

:last-child{
background:#ff0;
}

奇数偶数をいつ使うかというと
やっぱりテーブルで交互に色を付けるとき

しかしテーブルってrowspanとか使っているときが多い
そうするとセルの数が変わるためちゃんと指定できない

これの解決策はあるのか?と調べると
jQueryを使ったりcssセレクタを使ったり
様々な方法があるようです

こういうのでスマートにできればいいなと思いつつ
ついつい各trタグにclass指定をしてしまいます

コメント