JSを使用せずにCSSだけで「空白のセルがある場合」に限定したスタイリングをする方法

こんにちは。エキサイトでデザイナーをしている齋藤です。

今回は、JSを使用せずにCSSだけで「空白のセルがある場合」に限定したスタイリングをする方法をご紹介します。

実現したいこと
完成形
どうやるのか
さいごに

実現したいこと

冒頭、実現したい状態を整理しておきます。

上の画像のテーブルでは、「鈴木花子」さんの行の年齢のセルが空白になっています。

このような場合、以下のように「鈴木花子」さんの行全体を塗りつぶし、空白のセルは特に濃く塗りつぶされるようなUIにしたいとします。

このような場合に、CSSの擬似クラスである:emptyと関数の:has()を使用することで、JSを使用せずにスタイリングをすることができます。

完成形

まずは完成形をお示しします。

See the Pen `data`属性と`:has()`を使用して空白のセルを持つ行のスタイルを変更する方法 by AyumuSaito (@ayumusaito-excite) on CodePen.

どうやるのか

子を持たない要素を表す:emptyと、引数に指定した条件を持つ要素に限ったスタイル適用ができる:has()を用いることで実現できます。

tr {
  &:has(td:empty) {
    background: #FFCECE; // 子要素をのない`td`タグを持つ場合に行全体の背景色を赤にする
  }
}

td: {
  &:empty {
    background: #FFA0A0; // 子要素がない場合にセルの背景色を特に濃い赤にする
  }
}