Written by Kasumi

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擬似クラスを使って指定した要素の有無を判別する方法について紹介しました。

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

目次

関連記事

HTMLCSS

【コピペ用】CSSでへこむボタンを作成する方法

2022.06.11
3036
HTMLCSS プログラミング

【簡単CSS】横スクロールできない問題を解決する方法

2022.03.16
7459
HTMLCSS プログラミング

【簡単】CSSで数字を縦向き・縦書きにする方法【text-orientation: upright;】

2022.04.06
6105
HTMLCSS

CSSで直前・後方の兄弟要素を指定する方法

2023.04.27
5724