最近よく見かけるようになったCSSの「:has()」擬似クラスをつかった実装ですが、今回はその活用例としてマウスホバーでセルの行列をハイライトするテーブルを作成してみようと思います。:has()を使うことで、JSで要素を取得できるような感じでCSS内でより条件分岐が細かくできるようになるため、これまでJSを使って実装していたこともCSSのみで実現できたりといったことも増えてきているようですね。今回作成するUIもたまに見かけるものですので参考にしていただけますと幸いです。   その他以前にも最近見かけるようになったCSSの機能について幾つか紹介していますので、こちらも合わせてどうぞ。 （過去記事） IEのサポート終了で積極的に取り入れたいCSSプロパティ＃1：実用編 IEのサポート終了で積極的に取り入れたいCSSプロパティ＃2：便利機能編 メディアクエリを使わないレスポンシブコーディングを試してみる ＃1：カラムレイアウト メディアクエリを使わないレスポンシブコーディングを試してみる ＃2：フォントサイズ メディアクエリを使わないレスポンシブコーディングを試してみる ＃3：コンテナクエリ   まずHTMLから見ていきます。下記のようなヘッダセルとデータセルが複数の行列で構成されたマトリクス状のテーブルを作成します。仕様としてはこの中でデータセルのみがマウスオーバーの対象とし、ヘッダセルとデータセル含む対応する行列がそれぞれハイライトされるというものになります。

<table>
  <colgroup>
    <col><col><col><col><col><col>
  </colgroup>
  <tbody>
    <tr>
      <th scope="col"></th><th scope="col">A列</th><th scope="col">B列</th><th scope="col">C列</th><th scope="col">D列</th><th scope="col">E列</th>
    </tr>
    <tr>
      <th scope="row">1行</th><td>A-1</td><td>B-1</td><td>C-1</td><td>D-1</td><td>E-1</td>
    </tr>
    <tr>
      <th scope="row">2行</th><td>A-2</td><td>B-2</td><td>C-2</td><td>D-2</td><td>E-2</td>
    </tr>
    <tr>
      <th scope="row">3行</th><td>A-3</td><td>B-3</td><td>C-3</td><td>D-3</td><td>E-3</td>
    </tr>
    <tr>
      <th scope="row">4行</th><td>A-4</td><td>B-4</td><td>C-4</td><td>D-4</td><td>E-4</td>
    </tr>
    <tr>
      <th scope="row">5行</th><td>A-5</td><td>B-5</td><td>C-5</td><td>D-5</td><td>E-5</td>
    </tr>
  </tbody>
</table>

  続いてCSSのほうを見ていきます。今回はJSを使わずCSSのみで実現するのですが、繰り返し部分はSassをつかって変数とループ処理で対応しています。テーブル自体のスタイルはそれぞれ必要に応じて対応していきますが、今回はハイライト部分のみを抜粋してまとめています。

$columns: 5;
tbody {
  @for $index from 1 through $columns {
    &:has(tr:not(:nth-of-type(1)) > td:nth-of-type(#{$index}):hover) {
      // ホバーしたセルを含む列のハイライト
      td:nth-of-type(#{$index}),
      tr:nth-of-type(1) > th:nth-of-type(#{$index + 1}) {
        background: pink;
      }
      // ホバーしたセルのハイライト
      td:hover {
        background: yellow;
      }
    }
  }
  tr:not(:nth-of-type(1)):has(td:hover) {
    // ホバーしたセルを含む行のハイライト
    th,td {
      background: skyblue; 
    }
  }
}

  まず列数を変数として格納し、列数に合わせてループ処理で列のハイライト部分を設定していきます。この時に「:has()」を使いますが、セレクタとしては1行目のヘッダセルの行以外の2行目以降に含まれるホバーしたn番目のtd要素が含まれるという解釈になります。つまりホバーしたセルと同じ順番の各行にあるtd要素を指しています。このままだとホバーした要素も同列のセルと同じ見た目になるので、自身のセルは別の色にハイライトされるよう上書きしておきます。また、この時ヘッダセルを含む列は対象外としています。   そして同じ要領で行のハイライトにも対応していきます。ここでも「:has()」を使っていますが、1行目以外のホバーされたtdを含むtr要素の子要素であるth、td要素を指します。つまりホバーされたtdと同行のセル全てにハイライトが適用されるわけですね。   今回作成したサンプルはこちらで確認いただけます。実際にマウスホバーで行列にハイライトが適用されているのが確認できますね。  

---

  今回は:has()擬似クラスの活用例ということでCSSのみで作成していますが、列数が動的に可変となる場合には他の対応も必要になりそうですね。といっても:has()をつかうことでCSSで対応できる幅が広くなったことは確かです。とても便利なものなので活用していきたいですね。