CSS Selectors

Summary

A Selector represents a structure. This structure can be used as a condition (e.g. in a CSS rule) that determines which elements a selector matches in the document tree, or as a flat description of the HTML or XML fragment corresponding to that structure.

Selectors may range from simple element names to rich contextual representations.

CSS Selector Reference

Type Selector

• elementname

Universal Selector

• *

Attribute Selector

• [attributename][attributename]
• [attributename="val"][attributename="val"]
• [attributename~="val"][attributename~="val"]
• [attributename|="val"][attributename|="val"]
• [attributename^="val"][attributename^="val"]
• [attributename$="val"][attributename$="val"]
• [attributename*="val"][attributename*="val"]

Class Selector

• .classname

ID Selector

• #idname

Pseudo-classes

Dynamic pseudo-classes

• :link:link
• :visited:visited
• :hover:hover
• :active:active
• :focus:focus

The target pseudo-class

• :target

The language pseudo-class

• :lang

The UI element states pseudo-classes

• :enabled:enabled
• :disabled:disabled
• :checked:checked

Structural pseudo-classes

• :root
• :nth-child
• :nth-last-child
• :nth-of-type
• :nth-last-of-type
• :first-child
• :last-child
• :first-of-type
• :last-of-type
• :only-child
• :only-of-type
• :empty

The negation pseudo-class

• :not

Pseudo-elements

• ::first-line
• ::first-letter
• ::before
• ::after

Combinators

Descendant combinator

• A B

Child combinator

• A > B

Adjacent sibling combinator

• A + B

General sibling combinator

• A ~ B

Case sensitivity

All Selectors syntax is case-insensitive within the ASCII range (i.e. [a-z] and [A-Z] are equivalent), except for parts that are not under the control of Selectors. The case sensitivity of document language element names, attribute names, and attribute values in selectors depends on the document language. For example, in HTML, element names are case-insensitive, but in XML, they are case-sensitive. Case sensitivity of namespace prefixes is defined in CSS3NAMESPACE.

Selector syntax

A selector is a chain of one or more sequences of simple selectors separated by combinators. One pseudo-element may be appended to the last sequence of simple selectors in a selector. A sequence of simple selectors 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.

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

Combinators are: whitespace, “greater-than sign” (U+003E, >), “plus sign” (U+002B, +) and “tilde” (U+007E, ~). White space may appear between a combinator and the simple selectors around it. Only the characters “space” (U+0020), “tab” (U+0009), “line feed” (U+000A), “carriage return” (U+000D), and “form feed” (U+000C) can occur in whitespace. Other space-like characters, such as “em-space” (U+2003) and “ideographic space” (U+3000), are never part of whitespace.

The elements of a document tree that are represented by a selector are the subjects of the selector. A selector consisting of a single sequence of simple selectors represents any element satisfying its requirements. Prepending another sequence of simple selectors and a combinator to a sequence imposes additional matching constraints, so the subjects of a selector are always a subset of the elements represented by the last sequence of simple selectors.

An empty selector, containing no sequence of simple selectors and no pseudo-element, is an invalid selector. Characters in Selectors can be escaped with a backslash according to the same escaping rules as CSS. CSS21.

Certain selectors support namespace prefixes. The mechanism by which namespace prefixes are declared should be specified by the language that uses Selectors. If the language does not specify a namespace prefix declaration mechanism, then no prefixes are declared. In CSS, namespace prefixes are declared with the @namespace rule. CSS3NAMESPACE

Groups of selectors

A comma-separated list of selectors represents the union of all elements selected by each of the individual selectors in the list. (A comma is U+002C.) For example, in CSS when several selectors share the same declarations, they may be grouped into a comma-separated list. White space may appear before and/or after the comma.

In this example, we condense three rules with identical declarations into one. Thus,

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 }

Warning: the equivalence is true in this example because all the selectors are valid selectors. If just one of these selectors were invalid, the entire group of selectors would be invalid. This would invalidate the rule for all three heading elements, whereas in the former case only one of the three individual heading rules would be invalidated.

Invalid CSS example:

h1 { font-family: sans-serif }
h2..foo { font-family: sans-serif }
h3 { font-family: sans-serif }

is not equivalent to:

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

because the above selector (h1, h2…foo, h3) is entirely invalid and the entire style rule is dropped. (When the selectors are not grouped, only the rule for h2…foo is dropped.)

See also

Related topics

• Using Selectors Tutorial
• CSS Educational Materials for Beginners
• CSS Properties Reference

Selector list

Selectors Level 3

Recommendation