CSS selectors
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.
Basic selectors
- 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. - Type selector
-
Selects all elements that have the given node name.
Syntax:elementname
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". - Attribute selector
-
Selects all elements that have 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).
Grouping selectors
- Selector list
-
The
,
selector is a grouping method that selects all the matching nodes.
Syntax:A, B
Example:div, span
will match both<span>
and<div>
elements.
Combinators
- Descendant combinator
-
The " " (space) combinator selects nodes that are descendants of the first element.
Syntax:A B
Example:div span
will match all<span>
elements that are inside a<div>
element. - 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. - 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>
, immediately or not. - Adjacent sibling combinator
-
The
+
combinator matches the second element only if it immediately follows the first element.
Syntax:A + B
Example:h2 + p
will match all<p>
elements that immediately follow an<h2>
element. - Column combinator
-
The
||
combinator selects nodes which belong to a column.
Syntax:A || B
Example:col || td
will match all<td>
elements that belong to the scope of the<col>
.
Pseudo
- Pseudo classes
-
The
:
pseudo 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
-
The
::
pseudo represent entities that are not included in HTML.
Example:p::first-line
will match the first line of all<p>
elements.
Specifications
Specification |
---|
Selectors Level 4 |
See the pseudo-class and pseudo-element specification tables for details on those.