CSS セレクターの構造

CSS セレクターは、ツリー構造内の要素または要素の特定のパターンを表します。「セレクター」という用語は、単純セレクター複合セレクター複雑セレクターを参照することができます。has()`擬似クラスに引数として記載する場合、これらのセレクターは相対セレクターと呼ばれ、1つ以上のアンカー要素からの相対的な要素を表します。

これらのセレクターはカンマ区切りのセレクターリストで結合することができます。非寛容セレクターリストに含まれるセレクターが無効な場合、セレクターリスト全体が無効になります。

単純セレクター

単純セレクターとは、単一の型セレクター、属性セレクター、擬似クラスなどの単一の成分を持つセレクターのことで、他のセレクター成分や結合子と組み合わせたり含んだりすることがないものです。指定された要素が単純セレクターに一致すると言うのは、その単純セレクターが要素を正確に説明している場合です。単一の基本セレクター属性セレクター擬似クラス擬似要素を含むセレクターは単純セレクターです。

css
#myId {
}

[pattern*="\d"] {
}

複合セレクター

複合セレクターは、結合子で区切られていない一連の単純セレクターです。複合セレクターは、単一の要素に対する同時条件の集合を表します。指定された要素が複合セレクターに一致するというのは、その要素が複合セレクターに含まれるすべての単純セレクターに一致するときです。

css
a#selected {
}

[type="checkbox"]:checked:focus {
}

複合セレクターでは、型セレクター または全称セレクターがセレクターの並びの先頭に来なければなりません。型セレクターまたは全称セレクターを入力することができるのは 1 つだけです。ホワイトスペースは子孫結合子を表しますので、複合セレクターを構成する単純セレクターの間にホワイトスペースを入れてはいけません。

複雑セレクター

複雑セレクターは、ホワイトスペースの子孫結合子を含む、結合子で区切られた 1 つ以上の単純セレクターや複合セレクターの並びです。

複雑セレクターは、一連の要素に対する一連の同時条件を表します。

css
a#selected > .icon {
}

.box h2 + p {
}

セレクターは右から左に読むことができます。例えば、a#selected > .iconselected という id を持つ <a> 要素の直接の子要素で、クラスが icon であるすべての要素に一致します。セレクター .box h2 + pbox クラスを持つ要素の子孫である <h2> 要素の直後に来る最初の <p> に一致します。

相対セレクター

相対セレクターは、結合子で始まる 1 つ以上のアンカー要素からの相対的な要素を表すセレクターです。明示的な結合子で始まらない相対セレクターは、暗黙の子孫結合子を持ちます。

css
+ div#topic > #reference {
}

> .icon {
}

dt:has(+ img) ~ dd {
}

セレクターリスト

セレクターリストは、単純、複合、複雑セレクターのカンマ区切りのリストです。指定された要素がセレクターリストに一致するとき、その要素はセレクターリストに一致すると言われます。

css
#main,
article.heading {
}

非寛容セレクターリストのセレクターが無効な場合、セレクターリスト全体が無効になります。

css
#main,
:bad-pseudoclass,
.validClass {
  /* `:bad-pseudoclass` は無効なので、このスタイルブロックは無効になりました */
}

:is():where() 擬似クラスは、寛容なセレクターリストを構築するために使用することができます。

仕様書

Specification
Selectors Level 4

関連情報