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.
*will match all the elements of the document.
- Type selector
- Selects all elements that have the given node name.
inputwill match any <input> (en-US) element.
- 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.
#tocwill match the element that has the ID "toc".
- Attribute selector
- Selects all elements that have the given attribute.
[autoplay]will match all elements that have the
autoplayattribute set (to any value).
- Descendant combinator
div spanwill match all
<span>elements that are inside a
- Child combinator
>combinator selects nodes that are direct children of the first element.
A > B
ul > liwill match all
<li>elements that are nested directly inside a
- 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.
A ~ B
p ~ spanwill match all
<span>elements that follow a
<p>, immediately or not.
- Adjacent sibling combinator
+combinator selects adjacent siblings. This means that the second element directly follows the first, and both share the same parent.
A + B
h2 + pwill match all
<p>elements that directly follow an <h2> (en-US).
- Column combinator
||combinator selects nodes which belong to a column.
A || B
col || tdwill match all <td> (en-US) elements that belong to the scope of the <col> (en-US).
- Pseudo classes
:pseudo allow the selection of elements based on state information that is not contained in the document tree.
a:visitedwill match all
<a>elements that have been visited by the user.
- Pseudo elements
::pseudo represent entities that are not included in HTML.
p::first-linewill match the first line of all
|Selectors Level 4||Working Draft||Added the
|Selectors Level 3||Recommendation||Added the
Made pseudo-elements use a
|CSS Level 2 (Revision 1)||Recommendation||Added the
Added the universal and attribute selectors.
|CSS Level 1||Recommendation||Initial definition.|