【CSS】:has() CSS疑似クラスの使い方

2023年12月28日2024年6月22日

2023/12/20発表されたFirefox 121から:has() CSS疑似セレクターのサポートが始まりました。

https://www.mozilla.org/en-US/firefox/121.0/releasenotes/

これにより最新のChrome、Edge、Safari、Firefox、Operaなどの主要ブラウザでサポートされたので、今後使用する機会や目にすることが増えてきます。

本記事では、:has()の基本から応用までを理解し、実際に使用する際に困らないように丁寧に解説していきます。

:has()疑似クラスとは？

:has()疑似クラスは、CSSの中でも比較的新しい機能で、特定の条件を満たす要素をより柔軟に選択するために使用されます。

端的に言うと

今までになかった親要素を指定できるセレクタです。

従来のCSSでは、特定の子要素を持つ親要素にスタイルを適用することは困難で、JavaScriptなどを使用してコントロールしていました。

しかし、:has()を使用することで、例えば「ul要素の中に特定のクラスを持つli要素が含まれている場合にのみ、ul要素にスタイルを適用する」といった指定が可能になります。

また、:has()疑似クラスは、セレクタの中で他のセレクタを参照することを可能にします。

これにより、特定の条件下でのみ適用されるスタイルルールを作成することができ、コードの再利用性と保守性が向上します。

例えば、特定の画像がある場合にのみ、周囲のテキストのスタイルを変更するといったことが可能になります。

:has()の基本的な使い方と例

:has()の基本的な文法と、実際のコード例を通じて、その使い方を具体的に見ていきましょう。

:has()の基本的な文法

:has()疑似クラスの基本的な文法は次の通りです

セレクタ:has(条件セレクタ) {
    /* スタイルルール */
}

この文法では、「セレクタ」が「条件セレクタ」を満たす子要素を持っている場合に、指定されたスタイルが適用されます。条件セレクタは、子要素だけでなく孫要素などの子孫要素に対しても指定することが可能です。

実際のコード例

実際のコード例をいくつか見てみましょう。以下は、:has()疑似クラスの基本的な使用例です。

例1：子要素に特定のクラスがある場合の親要素のスタイリング

.box:has(.yellow) {
    background-color: yellow;
}

この例では、div要素の中に.yellowクラスを持つ子要素がある場合に、そのdiv要素に黄色の背景色が適用されます。

See the Pen Untitled by ryoma (@hwjgdjpk-the-decoder) on CodePen.

例2：リストアイテムの中に特定の内容がある場合にスタイルを適用

ul:has(li:contains('重要')) {
    border: 2px solid red;
}

ここでは、ul要素の中のli要素に’重要’というテキストが含まれている場合、そのul要素に赤い境界線が適用されます。

これらの例を通じて、:has()疑似クラスがどのように機能するかを理解することができます。

CSSの現在の仕様では:contains()擬似クラスはサポートされていません。代わりに、JavaScriptを使用して同様の機能を実現することができます。

:has()の基応用例

:has()疑似クラスを使用することで、特定の条件下でのみレスポンシブなスタイル変更を実現することが可能になります。

メディアクエリとの組み合わせ

:has()は、メディアクエリと組み合わせて使用することで、特定の条件下でのみレスポンシブな挙動を実現できます。例えば、特定のコンテンツが存在する場合にのみ、レイアウトの変更を行うようなケースです。

@media screen and (max-width: 768px) {
  .box:has(.important-info) {
    display: flex;
    flex-direction: column;
  }
}

この例では、.box内に.important-infoクラスを持つ要素が存在する場合に限り、768px以下の画面幅でコンテナのレイアウトを縦並びに変更しています。

See the Pen Untitled by ryoma (@hwjgdjpk-the-decoder) on CodePen.

条件付きレイアウトの調整

:has()を用いることで、特定の要素が存在する場合のみレイアウトを調整することが可能です。これにより、コンテンツの有無に応じて動的にレイアウトを変更することができます。

.article:has(.image-gallery) {
  padding-bottom: 20px;
}

上記のコードでは、.article要素内に.image-galleryが存在する場合にのみ、余白を追加しています。これにより、画像ギャラリーがある記事に対して適切なスペーシングを提供できます。

このように:has()疑似クラスを使って、レスポンシブデザインにおける動的なスタイル変更を行うことで、より快適で効率的な開発を行うことができます。

よくある間違いとその対処法

:has()疑似クラスを使用する際には、いくつかの一般的な間違いに注意する必要があります。

間違い1: パフォーマンスへの過剰な影響

:has()疑似クラスは、特に複雑な条件を含む場合、ブラウザのパフォーマンスに影響を与える可能性があります。

多用すると、ページの読み込み速度やレンダリング速度が低下する恐れがあるため、必要な場所にのみ使用するようにしましょう。

対処法

:has()を使う際は、なるべくシンプルなセレクタを使用する。
ページ内での:has()の使用回数を制限する。
デバッグツールを使用して、パフォーマンスへの影響をモニタリングする。

間違い2: ブラウザの互換性の誤解

全てのブラウザが:has()疑似クラスをサポートしているわけではありません。

特に古いブラウザではサポートされていないことが多く、ウェブサイトのアクセス層によっては問題となる場合があります。

対処法

ブラウザの互換性を事前に確認する。
グレースフルデグラデーション（古いブラウザでは機能が限定されるが、基本的な機能は保持する）を意識する。
必要に応じて、フォールバックスタイルを用意する。

間違い3: 複雑なネストや連鎖

:has()を使って複雑なセレクタのネストや連鎖を作成すると、コードの読みやすさが低下し、保守が困難になることがあります。

対処法

可能な限りセレクタをシンプルに保つ。
コードの可読性を高めるために、コメントや適切なフォーマットを使用する。
複雑なスタイルルールは、小さなモジュールやコンポーネントに分割する。

これらの点に注意して:has()疑似クラスを使うことで、効果的かつ効率的なCSSスタイルを実現できます。

ブラウザ互換性と今後の展望

:has()疑似クラスは、現代のWebデザインにおいて非常に強力なツールですが、そのブラウザ互換性には特に注意が必要です。

ブラウザ互換性の現状

:has() CSS関係性擬似クラスは、最新のChrome、Edge、Safari、Firefox、Operaなどの主要ブラウザでサポートされています。ただし、Internet ExplorerやOpera Miniなどの古いブラウザではサポートされていません。

詳細はCan I useで確認できます。

対処法

Webサイトを訪れるユーザーのブラウザ統計を確認し、互換性の計画を立てる。
CSSの機能検出（Feature Detection）を利用して、:has()がサポートされているかを判断し、条件に応じたスタイリングを適用する。
必要に応じて、古いブラウザでのフォールバックスタイルを用意する。

今後の展望

:has()疑似クラスは、CSSにおけるより高度な選択肢を提供し、Webデザインの可能性を広げます。今後、この機能のブラウザサポートが拡大するにつれ、より複雑で動的なデザインが容易に実現可能になることが期待されます。

まとめ

本記事では「:has() CSS疑似クラスの使い方」というテーマに沿って、:has()疑似クラスの基本から応用、さらにはよくある間違いやブラウザ互換性について詳しく解説しました。:has()疑似クラスは、Webデザインにおいて非常に強力なツールであり、適切に使いこなすことで、より洗練されたスタイリングと動的なデザインを実現することができます。

他の記事でもコーディングに関する情報を発信していますので、あわせて参考にしてみて下さい。