selectors

< css
Jump to: navigation, search

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

Universal Selector

Attribute Selector

Class Selector

ID Selector

Pseudo-classes

Dynamic pseudo-classes

The target pseudo-class

The language pseudo-class

The UI element states pseudo-classes

Structural pseudo-classes

The negation pseudo-class

Pseudo-elements

Combinators

Descendant combinator

Child combinator

Adjacent sibling combinator

General sibling combinator

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


css/selectors/IDcss/selectors/Namespaced
css/selectors/Universalcss/selectors/attribute selector
css/selectors/attributes/equalitycss/selectors/attributes/existencecss/selectors/attributes/hyphen
css/selectors/attributes/prefixcss/selectors/attributes/substringcss/selectors/attributes/suffix
css/selectors/attributes/whitespacecss/selectors/class
css/selectors/class selectorcss/selectors/combinators/adjacent siblingcss/selectors/combinators/child
css/selectors/combinators/descendantcss/selectors/combinators/general sibling
css/selectors/id selector
css/selectors/pseudo-classes
css/selectors/pseudo-classes/:-ms-input-placeholdercss/selectors/pseudo-classes/:activecss/selectors/pseudo-classes/:checked
css/selectors/pseudo-classes/:disabledcss/selectors/pseudo-classes/:emptycss/selectors/pseudo-classes/:enabled
css/selectors/pseudo-classes/:first-childcss/selectors/pseudo-classes/:first-of-typecss/selectors/pseudo-classes/:focus
css/selectors/pseudo-classes/:hovercss/selectors/pseudo-classes/:indeterminatecss/selectors/pseudo-classes/:invalid
css/selectors/pseudo-classes/:langcss/selectors/pseudo-classes/:lang(c)css/selectors/pseudo-classes/:last-child
css/selectors/pseudo-classes/:last-of-typecss/selectors/pseudo-classes/:linkcss/selectors/pseudo-classes/:not
css/selectors/pseudo-classes/:nth-child(n)css/selectors/pseudo-classes/:nth-last-child(n)css/selectors/pseudo-classes/:nth-last-of-type(n)
css/selectors/pseudo-classes/:nth-of-type(n)css/selectors/pseudo-classes/:only-childcss/selectors/pseudo-classes/:only-of-type
css/selectors/pseudo-classes/:optionalcss/selectors/pseudo-classes/:requiredcss/selectors/pseudo-classes/:root
css/selectors/pseudo-classes/:targetcss/selectors/pseudo-classes/:validcss/selectors/pseudo-classes/:visited
css/selectors/pseudo-classes/Dynamic pseudo-classescss/selectors/pseudo-classes/Structural pseudo-classescss/selectors/pseudo-classes/ui element states pseudo-classes
css/selectors/pseudo-elementscss/selectors/pseudo-elements/::aftercss/selectors/pseudo-elements/::before
css/selectors/pseudo-elements/::first-lettercss/selectors/pseudo-elements/::first-linecss/selectors/pseudo-elements/::region
css/selectors/pseudo-elements/::selectioncss/selectors/typecss/selectors/universal selector