CSS:PseudoClasses
lastmod 2025-03-10created 2021-09-0110 edits
Written with a single colon (:); used to select a particular state of an element.
:root
A pseudo-class that selects an element at a particular position in the structure of a web document.
The :root selector is used to select the topmost element in the structure of a web document. That is, in HTML, :root always refers to <code>
<html>
</code>.
However, the :root pseudo-class has higher style priority than <code>
<html>
</code>. Write values here that may be reused throughout the document.
Declaring variables on the topmost element with :root makes them available to every element. Using variables through :root this way makes it easy to change them all at once.
Declaring :root variables
Declare properties shared across the web document as variables in advance.
Give the property name after -- (two hyphens), and write the property value after : (colon).
:root {
/* color */
--color-black: #3f454d;
--color-white: #ffffff;
--color-yellow: #fbbe28;
/* size */
--base-space: 8px;
--size-button: 60px;
--size-border: 4px;
--font-size: 18px;
}
Using :root variables
Declare the variable with var, and enter the property value inside the parentheses.
.colorBtn {
font-size: var(--font-size);
padding: calc(var(--base-space) * 1.8);
border-radius: var(--size-border);
}
.item {
background-color: var(--color-white);
display: flex;
align-items: center;
padding: var(--base-space);
margin-bottom: var(--base-space);
}
:not()
The negation CSS pseudo-class :not(X) is a functional notation that takes a simple selector X as an argument. It matches elements that are not represented by the argument. X must not contain another negation selector.
:has()
:is()
:where()
:first-child and :last-child
:nth-child
p {
font-weight: bold;
}
li:nth-child(-n + 3) {
border: 2px solid orange;
margin-bottom: 1px;
}
li:nth-child(even) {
background-color: lightyellow;
}