CSS セレクターの構造
CSS セレクターは、ツリー構造内の要素または要素の特定のパターンを表します。「セレクター」という用語は、単純セレクター、複合セレクター、複雑セレクターを参照することができます。has()`擬似クラスに引数として記載する場合、これらのセレクターは相対セレクターと呼ばれ、1つ以上のアンカー要素からの相対的な要素を表します。
これらのセレクターはカンマ区切りのセレクターリストで結合することができます。非寛容セレクターリストに含まれるセレクターが無効な場合、セレクターリスト全体が無効になります。
単純セレクター
複合セレクター
複合セレクターは、結合子で区切られていない一連の単純セレクターです。複合セレクターは、単一の要素に対する同時条件の集合を表します。指定された要素が複合セレクターに一致するというのは、その要素が複合セレクターに含まれるすべての単純セレクターに一致するときです。
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>
に一致します。
相対セレクター
相対セレクターは、結合子で始まる 1 つ以上のアンカー要素からの相対的な要素を表すセレクターです。明示的な結合子で始まらない相対セレクターは、暗黙の子孫結合子を持ちます。
+ div#topic > #reference {
}
> .icon {
}
dt:has(+ img) ~ dd {
}
セレクターリスト
セレクターリストは、単純、複合、複雑セレクターのカンマ区切りのリストです。指定された要素がセレクターリストに一致するとき、その要素はセレクターリストに一致すると言われます。
#main,
article.heading {
}
非寛容セレクターリストのセレクターが無効な場合、セレクターリスト全体が無効になります。
#main,
:bad-pseudoclass,
.validClass {
/* `:bad-pseudoclass` は無効なので、このスタイルブロックは無効になりました */
}
:is()
と :where()
擬似クラスは、寛容なセレクターリストを構築するために使用することができます。
仕様書
Specification |
---|
Selectors Level 4 |