• HTMLCSS

CSSのhas擬似クラスを使って指定した要素の有無を判別する方法

CSSを使って、ある要素内に指定した要素があるか有無を確認。

有無に応じてプロパティを適用したい。

本記事ではこのような悩みを解決します。

has擬似クラスを使って要素の有無を判別する

<div class="item">
  <p>pテキスト</p>
  <span>spanテキスト</span>
</div>

<style>
  /* itemクラスの中にpタグがあればpタグ内テキストの文字色をredに変更 */
  .item:has(p) p {
    color: red;
  }

  /* itemクラスの中にpタグが無ければspanタグ内のテキストの文字色をredに変更 */
  .item:not(:has(p)) {
    color: red;
  }
</style>

要素の有無を判別するコード例です。

has擬似クラスを使います。

使い方は以下の通りです。

親要素:has(有無を確認したい要素)

有無を確認したい要素の親要素にhas擬似クラスを付与。

引数に有無を確認したい要素を指定します。

以上で対象の要素が有る場合にブロック内のプロパティが適用されます。

逆に対象の要素が無しの場合にプロパティを適用したい場合は以下のようnot擬似クラスを使います。

親要素:not(:has(有無を確認したい要素))

本コード例ではitemクラス内にpタグがある場合、pタグテキストの文字色をredに。

pタグが無い場合はspanタグテキストの文字色がredになるようhasクラスを使ってCSSプロパティを指定してます。

以上で実装完了です。

まとめ

CSSのhas擬似クラスを使って指定した要素の有無を判別する方法について紹介しました。

以上で解説を終わります。