CSS Pseudo-classes

CSS pseudo-classes select elements based on a state, condition, position, or user interaction that is not necessarily represented by an HTML attribute or class.

A pseudo-class is added to a selector using a colon (:) followed by the pseudo-class name. CSS includes many pseudo-classes, allowing styles to respond to user interaction, form states, document structure, and other conditions.

Pseudo-class Syntax

A pseudo-class follows a selector and begins with a colon. The following rule uses the :hover pseudo-class to select links while the user points to them.

a:hover {
  color: red;
}

The pseudo-class does not need to be added to the HTML. The browser determines when the element matches the specified condition.

Link Pseudo-classes

CSS provides pseudo-classes for styling links according to their state. Two commonly used link pseudo-classes are :link and :visited.

a:link {
  color: blue;
}
a:visited {
  color: purple;
}

The :link pseudo-class selects links that have not been visited, while :visited selects links the browser recognizes as previously visited.

Browsers restrict which properties can be changed with :visited to protect the user's browsing history.

User Action Pseudo-classes

User action pseudo-classes match elements while the user interacts with them. Common examples include :hover, :active, and :focus.

a:hover {
  text-decoration: none;
}
button:active {
  transform: scale(0.98);
}
input:focus {
  outline: 2px solid blue;
}

:hover applies while a pointing device is over an element, :active applies while an element is being activated, and :focus applies when an element has focus.

Focus styles are especially important for people who navigate webpages with a keyboard, so visible focus indicators should not be removed without providing an accessible replacement.

Form Pseudo-classes

Form-related pseudo-classes can select controls according to their current state. Examples include :checked, :disabled, :required, :valid, and :invalid.

input:checked {
  accent-color: green;
}
input:required {
  border: 2px solid blue;
}
input:disabled {
  opacity: 0.5;
}

These selectors allow styles to respond automatically as the state of a form control changes.

Structural Pseudo-classes

Structural pseudo-classes select elements according to their position or relationship within the document structure. Common examples include :first-child, :last-child, and :nth-child().

li:first-child {
  font-weight: bold;
}
li:last-child {
  border-bottom: none;
}
li:nth-child(even) {
  background-color: #f2f2f2;
}

The :first-child pseudo-class matches an element when it is the first child of its parent, while :last-child matches the last child. The :nth-child() pseudo-class can select elements according to a repeating pattern or position.

Functional Pseudo-classes

Some pseudo-classes accept a value or selector list inside parentheses. These are known as functional pseudo-classes. Examples include :not(), :is(), :where(), and :has().

p:not(.note) {
  color: #333333;
}
:is(h1, h2, h3) {
  font-family: Arial, Helvetica, sans-serif;
}
article:has(img) {
  padding: 20px;
}

The :not() pseudo-class excludes matching elements, :is() provides a convenient way to match alternatives, and :has() can match an element according to related elements described by its argument.

The :where() pseudo-class works similarly to :is(), but it contributes no specificity of its own. Specificity is covered in detail in the CSS Specificity tutorial.

Pseudo-classes Example

The following example demonstrates pseudo-classes that respond to user interaction and element state.

<style>
.example-link {
  color: blue;
}
.example-link:hover {
  color: red;
}
.example-input:focus {
  outline: 2px solid blue;
}
.example-checkbox:checked + label {
  font-weight: bold;
}
</style>

<p><a href="#" class="example-link">Point to this link</a></p>
<p><input type="text" class="example-input" placeholder="Click or tab here"></p>
<p>
  <input type="checkbox" id="option" class="example-checkbox">
  <label for="option">Check this option</label>
</p>

Play in Editor

Pointing to the link changes its color, focusing the text field displays an outline, and selecting the checkbox makes its label bold.