CSS Selectors

This section contains a list of selectors available for Cascading Style Sheets (CSS).

Selectors

Class Selector

Matches the class attribute of the specified element.

Equality [=] Attribute Selector

Exactly matches the specified attribute value.

Existence [] Attribute Selector

Matches the attribute, whatever its value.

Hyphen [|=] Attribute Selector

Matches any attribute value that is exactly equal, or optionally, followed by a hyphen.

ID Selector

Matches the id attribute of the specified element.

Prefix [^=] Attribute Selector

Matches the specified prefix of an attribute value.

Substring [*=] Attribute Selector

Matches the specified substring of an attribute value.

Suffix [$=] Attribute Selector

Matches the specified suffix of an attribute value.

Type Selector

Matches any element of the specified type.

Universal (*) Selector

Matches any element type.

Whitespace [~=] Attribute Selector

Exactly matches the specified attribute value in a space-delimited list of values.

Pseudo-classes

:active

Sets the style of an element when it is engaged or active.

:checked

Applies one or more styles to the form control element that is selected.

:disabled

Applies one or more styles to the form control element that is disabled.

:empty

Applies one or more styles to the element that has no child elements (including text nodes).

:enabled

Applies one or more styles to the form control element that is enabled.

:first-child

Applies one or more styles to any element that is the first child of its parent.

:first-of-type

Applies one or more styles to the element that is the first sibling element of its type.

:focus

Sets the style of an element when it gains focus.

:hover

Sets the style of an element when the user hovers the mouse pointer over the element.

:indeterminate

Applies one or more styles to radio buttons and check boxes whose toggle states cannot be determined—they are neither checked (selected) nor unchecked (cleared).

:lang(C)

In a document, selects the elements that are in a given language.

:last-child

Applies one or more styles to the element that is the last child element of its parent element.

:last-of-type

Applies one or more styles to the element that is the last sibling element of its type.

:link

Sets the style of an a element when the link has not been visited recently.

:not(s)

Applies one or more styles to elements that do not match the simple selector s.

:nth-child(n)

Applies one or more styles to the element that is the n-th child of its parent element.

:nth-last-child(n)

Applies one or more styles to the element that is the n-th child of its parent element, counting from the last one.

:nth-last-of-type(n)

Applies one or more styles to the element that is the n-th sibling of its type, counting from the last one.

:nth-of-type(n)

Applies one or more styles to the element that is the n-th sibling of its type.

:only-child

Applies one or more styles to the element that is the last sibling element of its type.

:only-of-type

Applies one or more styles to the element that is the only sibling element of its type.

:root

Applies one or more styles to the element that is the root element of the document.

:target

Applies one or more styles to the target element of of the referring Uniform Resource Identifier (URI).

:visited

Sets the style of an A element if the link has been visited recently.

Pseudo-elements

:selection

Applies one or more styles to any text on the page that the user has highlighted.

:after

Defines generated content that appears after an element.

:before

Defines generated content that appears before an element.

:first-letter

Applies one or more styles to the first letter of the object.

:first-line

Applies one or more styles to the first line of the object.

Combinators

Adjacent Sibling (+) Combinator

Specifies an adjacent sibling relationship between selector elements.

Child (>) Combinator

Specifies a direct descendant relationship between selector elements.

Descendant Combinator

Specifies an arbitrary ancestral relationship between selector elements.

General Sibling (~) Combinator

Specifies a general sibling relationship between selector elements.