tableで擬似クラスnth-childを反映する方法

今回はtableでnth-childを使い、特定の部分のスタイルを変えたい場合、上手く反映されない解決方法についてご紹介したいと思います。

特定のthやtdだけCSSを指定したい

tableで擬似クラスnth-childを反映する方法

普段table内のthだけ色を変える場合「table th{background-color: 色指定;}」と書くのがクセの方で、たまにやってしまう誤った記述から見てみましょう。例:「table内のthとtdの2番目の色を変更したい」そのためCSSに疑似クラスのnth-child(2)を指定します。まずはthを指定してみましょう。

thに「table th::nth-child(2){スタイル記述}」CSSを指定すると…、下記の画像のように意図しないスタイルになってしまいました。

tableで擬似クラスnth-childを反映する方法

tableの構造について見直しましょう

tableの構成は「table > tr > thやtd」で出来ています。trで表の1行を定義し、その中にthやtdとセルを定義します。ですのでtable内の何番目のtr内のthやtdといった具合に指定しなければなりません。例:「table tr:nth-child(2) th{スタイル記述}」

tableで擬似クラスnth-childを反映する方法

基本的だけど忘れていたり発見することがある

今回書こうと思った切っ掛けが、tableで特定の箇所のCSSを細かく指定したいと思いnth-childを指定していたところ私自身少しつまづいたためです。tableの中のthと偶数のtrだけ指定することはよくありますが、thだけ指定の場合trを省略するため忘れておりました。以上、テクノブレイブ名古屋オフィス開発1Gでした。

料金表ナビゲーション 料金表ナビゲーション

おすすめ記事