CSS selectors define the elements to which a set of CSS rules apply.
Basic selectors
- Type selector
- Selects all elements that match the given node name.
Syntax:eltname
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". - 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. - Attribute selector
- Selects elements based on the value of 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 theautoplay
attribute set (to any value).
Combinators
- Adjacent sibling combinator
- The
+
combinator selects adjacent siblings. This means that the second element directly follows the first, and both share the same parent.
Syntax:A + B
Example:h2 + p
will match all<p>
elements that directly follow an<h2>
. - 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>
. - 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. - Descendant combinator
- The
Syntax:A B
Example:div span
will match all<span>
elements that are inside a<div>
element.
Pseudo-classes
- Pseudo-classes 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
- Pseudo-elements 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 | |
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 |
Document Tags and Contributors
Tags:
Contributors to this page:
mfluehr,
Majr,
whimsy,
rpozarickij,
nicolo-ribaudo,
Sebastianz,
rafacv,
cxw,
teoli
Last updated by:
mfluehr,