CSS セレクターの構造

単純セレクター

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

#myId {
}

[pattern*="\d"] {
}

複合セレクター

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

a#selected {
}

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

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

複雑セレクター

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

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

a#selected > .icon {
}

.box h2 + p {
}

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

セレクターリスト

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

#main,
article.heading {
}

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

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

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

相対セレクター

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

相対セレクターは、セレクターリストでは使用できません。むしろ、 :has() 擬似クラスなどの特定のコンテキスト内で受け入れられます。

:has(+ div#topic > #reference) {
}

:has(> .icon) {
}

dt:has(+ img) ~ dd {
}

仕様書

関連情報

• CSS セレクターと結合子
• 寛容なセレクターリスト
• Document.querySelector()
• Document.querySelectorAll()
• CSS セレクターモジュール
• CSS 擬似要素モジュール