Skip to content

Instantly share code, notes, and snippets.

@jonathantneal
Last active April 28, 2020 13:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jonathantneal/bd0847c303ccda1e17cc0d26ff91d29a to your computer and use it in GitHub Desktop.
Save jonathantneal/bd0847c303ccda1e17cc0d26ff91d29a to your computer and use it in GitHub Desktop.
CSS Selector Definitions

CSS Selector Definitions

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 Grammar

<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

<combinator> = <comment>* <whitespace> <omit>* | <omit>* <delimiter>+ <omit>*

Simple Selectors

<type-selector> = <comment>* <named-identifier>

<class-selector> = <comment>* <"."> <named-identifier>

<id-selector> = <comment>* <"#"> <named-identifier>

<pseudo-selector> = <comment>* <":">+ <comment>* [ <named-identifier> | <function> ]

Simple Selectors: Attribute Selector

<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>

Omission

<omit> = <comment> | <whitespace>

Grammar Notes

  • 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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment