CSS selectors

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

Note: There are no selectors or combinators to select parent items, siblings of parents, or children of parent siblings.

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

Specification Status Comment
Selectors Level 4 Working Draft Added the || column combinator, grid structural selectors, logical combinators, location, time-dimensional, resource state, linguistic and UI pseudo-classes, modifier for ASCII case-sensitive and case-insensitive attribute value selection.
Selectors Level 3 Recommendation Added the ~ general sibling combinator and tree-structural pseudo-classes. Made pseudo-elements use a :: double-colon prefix. Additional attribute selectors
CSS Level 2 (Revision 1) Recommendation Added the > child and + adjacent sibling combinators. Added the universal and attribute selectors.
CSS Level 1 Recommendation Initial definition.

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

See also