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.
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.
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.
Selects all elements that have the given node name. Syntax: elementname
Example: input
will match any <input>
element.
Selects all elements that have the given class
attribute. Syntax: .classname
Example: .index
will match any element that has a class of "index".
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".
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 the autoplay
attribute set (to any value).
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.
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.
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.
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.
The +
combinator matches the second element only if it immediately follows the first element. Syntax: A + B
Example: h2 + p
will match the first <p>
element that immediately follow an <h2>
element.
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>
.
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.
The ::
pseudo represent entities that are not included in HTML. Example: p::first-line
will match the first line of all <p>
elements.
Specification |
---|
Selectors Level 4 |
See the pseudo-class and pseudo-element specification tables for details on those.
© 2005–2022 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors