パソコン

tableの表を交互に色を変えるnth-child()擬似クラス

nth-child()はその兄弟要素の中での位置に基づいて選択をするという擬似クラスです。

擬似クラスについては

(カッコ)の中に入れる要素や数字

nth-child(カッコ)の中に入れる数字や要素で選択することが異なってきます、下の数字や要素を入れていきます。

1 一番最初の要素
2n 偶数を表します(evenと同じ)
2n+1 奇数を表します(oddと同じ)
4n 4の倍数を意味します、3つおきに選択するようになります。
odd 兄弟要素の中で奇数番目の要素を選択します。
even 兄弟要素の中で偶数番目の要素を選択します。
3(数字のみ) 3番目の要素だけ適用する
n+4 4番目以降の項目に適用されます

oddを設定する

tr(行)にodd奇数番目を選択させて、色はr(赤)、g(緑)、b(青)色を0~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(1)
これと同じ表示をするのが
first-childです。

nth-childと
first-childはどちらでも表示しますが、first-childの方が対応するブラウザが多いようです。

最後を表すもの nth-last-child

last-childと
nth-last-child(1)があります、数字を変えれば最後から何番目に変わります。

これらの擬似クラスを使用して表の色を段階的に付けることができますので試してみて下さい。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事