Table of contents
CSS selectors define the elements to which a set of CSS rules apply.
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
/* Selects all elements */
* {
color: green;
}
Type selector
Selects all elements that have the given node name.
Syntax: elementname
Example: input will match any element.
/* All <a> elements. */
a {
color: red;
}
Class selectors
The CSS class selector matches elements based on the contents of their class attribute.
Syntax: .classname
Example: .index will match any element that has a class of "index".
/* All elements with class="spacious" */
.spacious {
margin: 2em;
}
/* All <li> elements with class="spacious" */
li.spacious {
margin: 2em;
}
/* All <li> elements with a class list that includes both "spacious" and "elegant" */
/* For example, class="elegant retro spacious" */
li.spacious.elegant {
margin: 2em;
}
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".
/* The element with id="demo" */
#demo {
border: red 2px solid;
}
Attribute selectors
The CSS attribute selector matches elements based on the presence or value of a 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).
/* <a> elements with a title attribute */
a[title] {
color: purple;
}
/* <a> elements with an href matching "https://example.org" */
a[href="https://example.org"] {
color: green;
}
/* <a> elements with an href containing "example" */
a[href*="example"] {
font-size: 2em;
}
/* <a> elements with an href ending ".org" */
a[href$=".org"] {
font-style: italic;
}
/* <a> elements whose class attribute contains the word "logo" */
a[class~="logo"] {
padding: 2px;
}
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 and
/* Selects all matching elements */
span,
div {
border: red 2px solid;
}
Combinators
Descendant combinator
The " " (space) combinator selects nodes that are descendants of the first element.
Syntax: A B
Example: div span will match all elements that are inside a
/* List items that are descendants of the "my-things" list */
ul.my-things li {
margin: 2em;
}
Child combinator
The > combinator selects nodes that are direct children of the first element.
Syntax: A > B
Example: ul > li will match all
- element.
/* List items that are children of the "my-things" list */
ul.my-things > li {
margin: 2em;
}
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 the first
element that immediately follow an <h2> element.
/* Paragraphs that come immediately after any image */
img + p {
font-weight: bold;
}
Column combinator
The || combinator selects nodes which belong to a column.
Syntax: A || B
Example: col || td will match all
/* Table cells that belong to the "selected" column */
col.selected || td {
background: gray;
}
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.
/* Any button over which the user's pointer is hovering */
button:hover {
color: blue;
}
Pseudo elements
The :: pseudo represent entities that are not included in HTML.
Example: p::first-line will match the first line of all
elements.
/* The first line of every <p> element. */
p::first-line {
color: blue;
text-transform: uppercase;
}