:has()

ハズ（セレクタ）

意味特定の子要素を持つ要素

:has()とは？

:has()セレクタは、指定されたセレクタにマッチする子要素を持つ要素を選択するために使用します。これにより、特定の条件を満たす子要素を持っているかどうかに基づいてスタイルを適用することができます。

:has()の具体的な使い方

子要素を持つ親要素をスタイリングする例

<style>
  div:has(> p) {
    border: 2px solid blue;
  }
</style>

<div>
  <p>段落1</p>
  <p>段落2</p>
</div>

直下の子要素としてp（段落）要素を持つすべてのdiv要素に青い枠線を適用します。

特定の要素が後に続く要素をスタイリングする例

<style>
  h2:has(+ p) {
    border-bottom: 2px solid blue;
  }
</style>

<h2>見出し1</h2>
<p>段落1</p>

<h2>見出し2</h2>
<span>段落ではない</span>

直後に段落要素（p）が続く見出し（h2）に青い下線を追加します。見出し1には下線が表示されますが、見出し2には表示されません。

:has()に関するよくある質問

Q. :has()の主な用途は？

A. :has()の主な用途は、特定の子要素や隣接要素の存在に基づいて親要素にスタイルを適用することです。これにより、従来のCSSでは難しかった「親セレクタ」のような機能を実現できます。

Q. :has()の制限は何ですか？

A. :has()は比較的新しい機能であり、すべてのブラウザで完全にサポートされているわけではありません。また、パフォーマンスへの影響を考慮して、複雑な条件や大規模なDOM構造での使用には注意が必要です。

Q. :has()と他のセレクタの違い？

A. :has()は「親セレクタ」として機能する点で他のセレクタと異なります。これにより、子要素の状態に基づいて親要素を選択できるため、より柔軟なスタイリングが可能になります。

:has()が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSの:has()や:target、:nth-of-type()、>、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。