DONT ADD ANYTHING HERE!

  1. selector
    1. A selector is a chain of one or more sequences of simple selectors separated by combinators.
    2. One pseudo-element may be appended to the last sequence of simple selectors in a selector.
  2. sequence of simple selectors
    1. A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator
    2. It always begins with a type selector or a universal selector
    3. No other type selector or universal selector is allowed in the sequence.
  3. simple selector
    A simple selector is one of
    1. type (h2)
    2. universal (*)
    3. attribute ([class~="myclass"])
    4. class (.myClass)
    5. id (#myId)
    6. pseudo-class (:first-of-type)
  4. combinators
    1. E > F (child combinator)
    2. E + F (next-sibling combinator)
    3. E ~ F (general-sibling combinator)
    4. E F (descendant combinator)
  5. comma
    1. A comma-separated list of selectors represents the union of all elements selected by each of the individual selectors in the list
    2. If just one of comma-separated selectors are invalid, the entire group of selectors is invalid!
  6. subject
    1. The elements of a document tree that are represented by a selector are the subjects of the selector

Selector examples

Pattern Represents Description
* any element universal selector
E an element of type E type selector
E[foo] an E element with a "foo" attribute attribute selector
E:root an E element, root of the document (structural) pseudo-class
E::first-line the first formatted line of an E element pseudo-element
E.warning an E element whose class is "warning" class selector
E#myid an E element with id equal to "myid". id selector
E:not(s) an E element that does not match simple selector negation pseudo-class
E F an F element descendant of an E element descendant combinator
E > F an F element child of an E element child combinator
E + F an F element immediately preceded by an E element next-sibling combinator
E ~ F an F element preceded by an E element subsequent-sibling combinator
A * B selects grandchildren (and great-grandchildren ...) spaces are descendent selectors

Attribute Selectors

Attribute Description
[att] Represents an element with the att attribute, whatever the value of the attribute.
[att=val] Represents an element with the att attribute whose value is exactly "val".
[att~=val] Represents an element with the att attribute whose value is a whitespace-separated list of words, one of which is exactly "val".
if "val" contains whitespace, it will never represent anything (since the words are separated by spaces).
also if "val" is the empty string, it will never represent anything.
[att|=val] Represents an element with the att attribute, its value either being exactly "val" or beginning with "val" immediately followed by "-"
[att^=val] Represents an element with the att attribute whose value begins with the prefix "val".
if "val" is the empty string then the selector does not represent anything.
[att$=val] Represents an element with the att attribute whose value ends with the prefix "val".
if "val" is the empty string then the selector does not represent anything.
[att*=val] Represents an element with the att attribute whose value contains at least one instance of the substring "val".
if "val" is the empty string then the selector does not represent anything.
[attr op val i] Inclusion of i or I makes comparison case-insensitive

References here

W3C selector syntax
W3C Attribute Selectors
W3C Selectors Level 4