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.
- Universal selector
Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces. Syntax:
*will match all the elements of the document.
- Type selector
Selects all elements that have the given node name. Syntax:
inputwill match any
- Class selector
Selects all elements that have the given
.indexwill match any element that has a class of "index".
- ID selector
Selects an element based on the value of its
idattribute. There should be only one element with a given ID in a document. Syntax:
#tocwill match the element that has the ID "toc".
- Attribute selector
Selects all elements that have the given attribute. Syntax:
[autoplay]will match all elements that have the
autoplayattribute set (to any value).
- Descendant combinator
- Child combinator
- General sibling combinator
~combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent. Syntax:
A ~ BExample:
p ~ spanwill match all
<span>elements that follow a
<p>, immediately or not.
- Adjacent sibling combinator
- Column combinator
- Pseudo classes
:pseudo allow the selection of elements based on state information that is not contained in the document tree. Example:
a:visitedwill match all
<a>elements that have been visited by the user.
- Pseudo elements
::pseudo represent entities that are not included in HTML. Example:
p::first-linewill match the first line of all
|Selectors Level 4||Working Draft||Added the
|Selectors Level 3||Recommendation||Added the
|CSS Level 2 (Revision 1)||Recommendation||Added the
|CSS Level 1||Recommendation||Initial definition.|