CSS :has()パーシャルクラス

定義と使用方法

CSS :has() パーシャルクラスは、特定の兄弟要素または内部に特定の要素を持つ親要素をマッチングするために使用されます。

使用例：

• 特定の兄弟要素または内部の内容に基づいて要素を非表示にしたり表示したりします。
• 特定の内容がある場合、レイアウトを変更します。
• 親要素が特定の兄弟要素または内部の内容を持っている場合、その外観を異にします。

例

例1

p要素の次に続く<h2>要素のスタイルを設定します：

h2:has(+ p) {
  color: gray;
  background-color: gold;
  border: 2px dotted red;
}

実際に試してみてください

例2

内部に<h1>要素を持つ<section>要素のスタイルを設定し、funfactというクラスを持つ<section>要素のスタイルも設定します：

section:has(h1) {
  background-color: gold;
}
section:has(.funfact) {
  color: blue;
}

実際に試してみてください

例3

内部に選択された<input>要素を持つ<ul>内の<li>要素のスタイルを設定します：

ul li:has(input:checked) {
  border:2px solid maroon;
}

実際に試してみてください

CSS文法

:has(relative-selector-list) {
  css宣言;
}

技術的詳細

ブラウザのサポート

テーブルの数字は、そのパーシャルクラスを完全にサポートする最初のブラウザのバージョンを指定しています。