CSSの:has擬似クラス:not擬似クラスとは？

CSS(シー・エス・エス)

2023.07.27

:has擬似クラス :not擬似クラスとは？
具体例
まとめ

:has擬似クラス :not擬似クラスとは？

CSSの:has擬似クラスは、指定されたセレクタに一致する要素の中で、特定の子孫要素を持つ要素を選択するために使用されます。

CSSの:not擬似クラスは、指定された条件に合致しない要素を選択するために使用されます。

<style>
div:has(p){
  color: red;
}
div:not(p){
  color: red;
}
div:not(:has(p)) h2 {
  color: red;
}
</style>

具体例

たとえば、以下のようなHTMLがあるとします：

[rml_read_more]

<div>
  <h2>Title</h2>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div>
<div>
  <h2>Title</h2>
  <p>Paragraph 1</p>
</div>
<div>
  <h2>Title</h2>
</div>

以下のスタイルを適用することで、p要素のないdivのテキストを赤にすることができます。

div:not(:has(p)) {
  color: red;
}

上記のCSSスタイルを使用すると、p要素を含まないdiv要素のテキストが赤く表示されます。

まとめ

:has擬似クラスは、指定されたセレクタに一致する要素の中で、特定の子孫要素を持つ要素を選択するために使用されます。

:not擬似クラスは、指定されたセレクタに合致しない要素を選択するための否定的な条件を定義するために使用されます。

詳細は公式ドキュメントを参照ください。

:has() - CSS: カスケーディングスタイルシート | MDN

:has() は CSS の擬似クラスで、引数として渡されたセレクターに (指定された要素の :scope の相対で) 該当する要素が一つ以上の要素に一致することを表します。