A Selector List is a collection of Complex Selectors separated by commas (,
).
<selector-list> = [ <omit>* <complex-selector> <omit>* ]#
Here are some examples of Selector Lists:
div#ant > .mouse:not(:hover)::before, #kitten, .puppy, [cat=dog]
h1, h2, h3, h4, h5, h6
👉 Hold up, what is
<omit>
?
A Complex Selector is a Compound Selector followed by one or more Relative Selectors.
<complex-selector> = <compound-selector> <relative-selector>+
Here is an example of a Complex Selector:
div#ant > .mouse:not(:hover) > span
A Relative Selector is a Combinator followed by a Compound Selector.
<relative-selector> = <combinator> <compound-selector>
Here are some examples of Relative Selectors:
> .mouse:not(:hover)
+ p
A Compound Selector is either a Type Selector, one or more Subclass Selectors, or both in that order.
<compound-selector> = [ <type-selector>? <subclass-selector>* ]!
Here are some examples of Compound Selectors:
.mouse:not(:hover)
ul[class]
A Subclass Selector is an ID Selector, a Class Selector, an Attribute Selector, or a Pseudo Selector.
<subclass-selector> = [ <id-selector> | <class-selector> | <attribute-selector> | <pseudo-selector> ]
Here are some examples of Subclass Selectors:
#ant
.mouse
[cat="dog"]
:hover
<selector-list> = [ <omit>* <complex-selector> <omit>* ]#
<complex-selector> = <compound-selector> <relative-selector>+
<relative-selector> = <combinator> <compound-selector>
<compound-selector> = [ <type-selector>? <subclass-selector>* ]!
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-selector>
<combinator> = <comment>* <whitespace> <omit>* | <omit>* <delimiter>+ <omit>*
<type-selector> = <comment>* <named-identifier>
<class-selector> = <comment>* <"."> <named-identifier>
<id-selector> = <comment>* <"#"> <named-identifier>
<pseudo-selector> = <comment>* <":">+ <comment>* [ <named-identifier> | <function> ]
<attribute-selector> = <"["> <omit>* <attribute-selector-name> [
<omit>* <attribute-selector-matcher> <omit>* <attribute-selector-value> [ <omit>* <attribute-selector-modifier> ]?
]? <omit>* <"]">
<attribute-selector-name> = <named-identifier>
<attribute-selector-value> = <string> | <named-identifier>
<attribute-selector-matcher> = <delimiter>+
<attribute-selector-modifier> = <named-identifier>
<omit> = <comment> | <whitespace>
- A bar (
|
) separates two or more alternatives: exactly one of them must occur. - A set of brackets (
[
and]
) indicates grouping. - An asterisk (
*
) indicates that the preceding node or group occurs zero or more times. - A plus (
+
) indicates that the preceding node or group occurs one or more times. - A question mark (
?
) indicates that the preceding node or group is optional (i.e occurs zero or one times). - A hash mark (
#
) indicates that the preceding node or group occurs one or more times, separated by comma tokens. - An exclamation point (
!
) after a group indicates that the group is required and must produce at least one value.