CSS Selectors
Selectors define to which elements a set of CSS rules apply.
Basic Selectors
- Type selectors
- This basic selector chooses all elements that matches the given name.
Syntax:eltname
Example:input
will match any<input>
element. - Class selectors
- This basic selector chooses elements based on the value of their
class
attribute.
Syntax:.classname
Example:.index
will match any element that has the classindex
(likely defined by aclass="index"
attribute or similar). - ID selectors
- This basic selector chooses nodes 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 (likely defined by aid="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.
Syntax:* ns|* *|*
Example:*
will match all the elements of the document. - Attribute selectors
- This basic selector chooses nodes based on the value of one of its attributes.
Syntax:[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
Example:[autoplay]
will match all the elements that have theautoplay
attribute set (to any value).
Combinators
- Adjacent sibling selectors
- The
'+'
combinator selects nodes that immediately follow the former specified element.
Syntax:A + B
Example:ul + li
will match any<li>
that immediately follows a<ul>
. - General sibling selectors
- The
'~'
combinator selects nodes that follow (not necessarily immediately) the former specified element, if both elements shared the same parent.
Syntax:A ~ B
Example:p ~ span
will match all<span>
elements that follow a<p>
element inside the same element. - Child selectors
- The
'>'
combinator selects nodes that are direct children of the former specified element.
Syntax:A > B
Example:ul > li
will match all<li>
elements that are inside a<ul>
element. - Descendant selectors
- The
' '
combinator selects nodes that are children (not necessary direct children) of the former specified element.
Syntax:A B
Example:div span
will match any<span>
element that is inside a<div>
element.
Pseudo-elements
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
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.
Specifications
Specification | Status | Comment |
---|---|---|
Selectors Level 4 | Working Draft | |
Selectors Level 3 | Recommendation | |
CSS Level 2 (Revision 1) | Recommendation | |
CSS Level 1 | Recommendation | Initial definition |
Browser compatibility
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 |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/css_selectors