CSS Selectors Level 3

Table of Contents

    1 Selector Syntax
    2 Simple Selectors
      2.1 Type selector (or Tag selector)
      2.2 Universal Selector
      2.3 Attribute selector
      2.4 Class (attribute) selector
      2.5 ID (attribute) selector
      2.6 Pseudo-classes
    3 Pseudo Elements
      3.1 The ::first-line pseudo-element
      3.2 The ::first-letter pseudo-element
      3.3 The ::before and ::after pseudo-elements
    4 Combinators
      4.1 Descendant combinator
      4.2 Child combinators
      4.3 Sibling combinators
    5 Calculating a selector's specificity

1. Selector Syntax

Selector

A selector is one or more sequences of simple selectors separated by combinators, an optional pseudo-element may follow the last sequence of simple selectors

selector = sequenceOfSimpleSelectors [combinator1 sequenceOfSimpleSelectors1 ... ] [::pseudoElement]

A sequence of simple selectors

• it is a chain of simple selectors that are not separated by a combinator
• it always begins with a type selector or a universal selector. No other type selector or universal selector is allowed in the sequence
• simple selectors are: type selector, universal selector, attribute selector, class selector, ID selector, pseudo-class.
• combinators are: whitespace, > "greater-than sign", + "plus sign", ~ "tilde"

The subjects of a selector are the elements of a document tree that are represented by the selector.

1.2 Group of Selectors

A comma-separated list of selectors represents all elements selected by each selector in the list. In CSS, if several selectors share the same declarations, they may be grouped into a comma-separated list.

Example: three CSS rules are condensed into one

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }
is equivalent to:

h1, h2, h3 { font-family: sans-serif }