記事の内容
tableの表を交互に色を変えるnth-child()擬似クラス
nth-child()はその兄弟要素の中での位置に基づいて選択をするという擬似クラスです。
擬似クラスについては
(カッコ)の中に入れる要素や数字
nth-child(カッコ)の中に入れる数字や要素で選択することが異なってきます、下の数字や要素を入れていきます。
１ 一番最初の要素
２ｎ 偶数を表します(evenと同じ)
２ｎ＋１ 奇数を表します(oddと同じ)
４ｎ 4の倍数を意味します、３つおきに選択するようになります。
odd 兄弟要素の中で奇数番目の要素を選択します。
even 兄弟要素の中で偶数番目の要素を選択します。
３(数字のみ) 3番目の要素だけ適用する
ｎ+４ 4番目以降の項目に適用されます
oddを設定する
tr(行)にodd奇数番目を選択させて、色はｒ(赤)、ｇ(緑)、ｂ(青)色を０～255までの数字で表して色を表現します。
1番目と3番目の行が少し薄い緑になりました。
このようにoddは奇数番目を選択して変更してくれます、これを使って偶数番目を選択して色を変えたいと思います。
evenを設定する
偶数番を選択する場合は「even」を使います。
odd奇数番目は薄い水色(#ccffff)を
even偶数番目は金色(gold)を選択しています。
色の設定方法には
文字の周りに隙間(余白)が多いのはなぜか？
td(セル)にパディングと文字色と文字揃え中央を設定していたからなんです。
範囲を指定してみる
何番目まで
nth-child(-n+3) { }
カッコ内の数字3番目までを指定します。
後ろから何番目まで
nth-last-shild(-n+3) { }
過去内の数字で後ろから3番目までを指定します。
何番目と何番目を指定する方法
「，(カンマ)」で区切って記述すれば複数を指定できます。
nth-child(3),
nth-child(5) { }
3番目と5番目を指定したことになります。
何番目から何番目を指定する方法
nth-child(n+2):nth-child(-n+6) { }
2番目から6番目を指定したことになります、上の記述と異なりますので気をつけましょう。
tableの表を交互に色を変えるnth-child()擬似クラス以外のもの
この擬似クラス「nth-child」以外にもあります。
最初を表すもの first-child
nth-child()では括弧の中に1を入れます。
nth-child(１)
これと同じ表示をするのが
first-childです。
nth-childと
first-childはどちらでも表示しますが、first-childの方が対応するブラウザが多いようです。
最後を表すもの nth-last-child
last-childと
nth-last-child(1)があります、数字を変えれば最後から何番目に変わります。
これらの擬似クラスを使用して表の色を段階的に付けることができますので試してみて下さい。
