CSS selectors

CSS selectors define the elements to which a set of CSS rules apply.

Basic selectors

Universal selector

Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces. Syntax: * ns|* *|* Example: * will match all the elements of the document.

Type selector

Selects all elements that have the given node name. Syntax: elementname Example: input will match any <input> element.

Class selector

Selects all elements that have the given class attribute. Syntax: .classname Example: .index will match any element that has a class of "index".

ID selector

Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document. Syntax: #idname Example: #toc will match the element that has the ID "toc".

Attribute selector

Selects all elements that have the given attribute. Syntax: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] Example: [autoplay] will match all elements that have the autoplay attribute set (to any value).

Grouping selectors

Selector list

The , selector is a grouping method that selects all the matching nodes. Syntax: A, B Example: div, span will match both <span> and <div> elements.

Combinators

Descendant combinator

The (space) combinator selects nodes that are descendants of the first element. Syntax: A B Example: div span will match all <span> elements that are inside a <div> element.

Child combinator

The > combinator selects nodes that are direct children of the first element. Syntax: A > B Example: ul > li will match all <li> elements that are nested directly inside a <ul> element.

General sibling combinator

The ~ combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent. Syntax: A ~ B Example: p ~ span will match all <span> elements that follow a <p>, immediately or not.

Adjacent sibling combinator

The + combinator matches the second element only if it immediately follows the first element. Syntax: A + B Example: h2 + p will match all <p> elements that immediately follows <h2> element.

Column combinator

The || combinator selects nodes which belong to a column. Syntax: A || B Example: col || td will match all <td> elements that belong to the scope of the <col>.

Pseudo

Pseudo classes

The : pseudo allow the selection of elements based on state information that is not contained in the document tree. Example: a:visited will match all <a> elements that have been visited by the user.

Pseudo elements

The :: pseudo represent entities that are not included in HTML. Example: p::first-line will match the first line of all <p> elements.

Specifications

See the pseudo-class and pseudo-element specification tables for details on those.

See also

• CSS Specificity