Selectors define to which elements a set of CSS rules apply.
- Type selectors
- This basic selector chooses all elements that matches the given name.
inputwill match any
- Class selectors
- This basic selector chooses elements based on the value of their
.indexwill match any element that has the class
index(likely defined by a
class="index"attribute or similar).
- ID selectors
- This basic selector chooses nodes 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 (likely defined by a
id="toc"attribute or similar).
- Universal selectors
- This basic selector chooses all nodes. It also exists in a one-namespace only and in an all-namespace variant too.
* ns|* *|*
*will match all the elements of the document.
- Attribute selectors
- This basic selector chooses nodes based on the value of one of its attributes.
[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
[autoplay]will match all the elements that have the
autoplayattribute set (to any value).
- Adjacent sibling selectors
'+'combinator selects nodes that immediately follow the former specified element.
A + B
+ pwill match any
<p>that immediately follows a
- General sibling selectors
'~'combinator selects nodes that follow (not necessarily immediately) the former specified element, if both elements shared the same parent.
A ~ B
p ~ spanwill match all
<span>elements that follow a
<p>element inside the same element.
- Child selectors
'>'combinator selects nodes that are direct children of the former specified element.
A > B
ul > liwill match all
<li>elements that are inside a
- Descendant selectors
' 'combinator selects nodes that are children (not necessary direct children) of the former specified element.
div spanwill match any
<span>element that is inside a
Pseudo-elements are abstractions of the tree representing entities beyond what HTML does. For example, HTML doesn't have an element describing the first letter or line of a paragraph, or the marker of a list. Pseudo-elements represent these entities and allow CSS rules to be associated with them. that way, these entitities can be styled independently.
Pseudo-classes allow to select elements based on information that is not contained in the document tree like a state or that is particularly complex to extract. E.g. they match if a link has been previously visited or not.
|Selectors Level 4||Working Draft|
|Selectors Level 3||Recommendation|
|CSS Level 2 (Revision 1)||Recommendation|
|CSS Level 1||Recommendation||Initial definition|
|Feature||Chrome||Firefox (Gecko)||Internet Explorer||Opera||Safari|
|Basic support||1||1.0 (1.7 or earlier)||3.0||3.5||1.0|
|Feature||Android||Firefox Mobile (Gecko)||IE Mobile||Opera Mobile||Safari Mobile|
|Basic support||1.5||1.0 (1.9.2)||?||?||3.2|