rowspanやcolspanでセル結合した要素にCSSを適用させる方法!

rowspanやcolspanでセル結合した要素にCSSを適用させる方法について解説します。rowspanやcolspanでセル結合した要素にCSSを適用させるには、CSSで少し工夫が必要です。ここではその方法をサンプルコード付きで解説します。

コンテンツ [表示]

  1. 1rowspanやcolspanでセル結合した要素にCSSでスタイルを適用したい
  2. 2rowspanやcolspanでセル結合した要素にCSSでスタイルを適用させる方法
  3. 2.1補足
  4. 3まとめ

rowspanやcolspanでセル結合した要素にCSSでスタイルを適用したい

rowspancolspanでセル結合した要素にCSSでスタイルを適用して、背景色などを変えて一部を目立たせたいということがあります。

その方法についてサンプルコード付きで以下の項目で解説します。

Photo bymohamed_hassan

rowspanやcolspanでセル結合した要素にCSSでスタイルを適用させる方法

rowspancolspanでセル結合した要素にCSSでスタイルを適用させるには属性セレクタを用います。

では実際にサンプルコードを用いて挙動を確認してみましょう。

このように属性セレクタを用いることで、rowspan属性がついているものに対して、背景色を設定できていることが分かります。

もしcolspan属性が付与されているものにCSSを適用させたい場合は、CSSでrowspanとなっているところをcolspanに変えましょう。

補足

今回nth-childを用いて1つだけ、CSSを適用させました。

これはnth-childの特性なのですが、もしtr要素にクラスを付けないと「内容4」の背景色も変わります。

これはtr要素の中の1つ目のtd要素にrowspanが設定されているからです。

このような時は今回のようにtr要素にクラスを付与したりして工夫しましょう。

あわせて読みたい
:nth-child
CSSの:nth-childは兄弟要素のグループの中のn番目の要素を表す擬似クラスです。:nth-childの使い方についてサンプルコード付きで解説します。

まとめ

いかがでしたでしょうか?

属性セレクタを用いることで、簡単にrowspancolspanでセル結合した要素にCSSを適用させることができるということが分かったと思います。

ぜひ皆さんもrowspancolspanでセル結合した要素にCSSを適用させてみてください。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

西村卓也
ライター

西村卓也

HTML/CSS/JSに関する記事を執筆しています。よろしくお願いします。