Pseudo-Classes

CSS Pseudo-Classes

A CSS pseudo-class selects an element based on a particular state, condition, or position that is not described by an ordinary element, class, ID, or attribute selector alone. Pseudo-classes can respond to user interaction, form states, document structure, and other conditions.

Pseudo-Class Syntax

A pseudo-class is added to a selector with a colon (:) followed by the pseudo-class name. Some pseudo-classes also accept a value or expression inside parentheses.

a:hover {
  color: red;
}

li:first-child {
  font-weight: bold;
}

li:nth-child(2) {
  color: blue;
}

In these examples, :hover represents an interaction state, while :first-child and :nth-child() select elements according to their position among siblings.

Link Pseudo-Classes

Links can be styled according to whether they have been visited and how the user is interacting with them. Common link-related pseudo-classes include :link, :visited, :hover, and :active.

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:hover {
  color: red;
}

a:active {
  color: green;
}

The :link pseudo-class applies to unvisited links, :visited applies to visited links, :hover applies while the pointing device is over the link, and :active applies while the link is being activated.

When styling these link states together, the traditional order :link, :visited, :hover, and :active helps prevent later rules from unexpectedly overriding earlier states.

The :hover Pseudo-Class

The :hover pseudo-class matches an element while a pointing device is positioned over it. It is commonly used to provide visual feedback for links, buttons, and other interactive elements.

a:hover {
  text-decoration: underline;
}

<a href="/contact.html">Contact Us</a>

The rule applies while the user hovers over the link. Because touch devices may not provide a traditional hover interaction, important information or functionality should not depend on hover alone.

The :focus Pseudo-Class

The :focus pseudo-class matches an element while it has focus. Focus commonly occurs when a user selects a form control or navigates to an interactive element with a keyboard.

input:focus {
  border-color: #0088cc;
  outline: 2px solid #0088cc;
}

<label for="name">Name:</label>
<input type="text" id="name" name="name">

Visible focus styling helps keyboard users identify which interactive element currently has focus. Avoid removing the browser's focus indicator unless another clearly visible focus style is provided.

Form State Pseudo-Classes

Several pseudo-classes select form controls according to their current state. Common examples include :checked, :disabled, :enabled, :required, and :optional.

input:checked {
  accent-color: #0088cc;
}

input:disabled {
  opacity: 0.6;
}

input:required {
  border-color: red;
}

<input type="checkbox" checked>
<input type="text" disabled>
<input type="email" required>

The first rule matches a checked input, the second matches a disabled input, and the third matches an input that is required.

Structural Pseudo-Classes

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

li:first-child {
  font-weight: bold;
}

li:last-child {
  border-bottom: 0;
}

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Last item</li>
</ul>

li:first-child matches a list item when that <li> is the first child of its parent. li:last-child matches a list item when it is the last child of its parent.

The :nth-child() Pseudo-Class

The :nth-child() pseudo-class selects elements according to their position among their siblings. A number can select one particular position.

li:nth-child(2) {
  color: blue;
}

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

The selector li:nth-child(2) matches the second list item because it is the second child of its parent.

The keywords odd and even can be used to select alternating positions.

li:nth-child(odd) {
  background-color: #f5f5f5;
}

The :nth-child() pseudo-class can also use formulas for more advanced patterns, but numbered positions and odd or even cover many common beginner uses.

Combining Pseudo-Classes with Selectors

Pseudo-classes are normally attached directly to another selector without a space. This limits the state or condition to elements that also match the preceding selector.

a:hover {
  color: red;
}

.notice:hover {
  background-color: #f5f5f5;
}

input[type="email"]:focus {
  border-color: #0088cc;
}

The first rule matches links being hovered, the second matches elements with the notice class while they are hovered, and the third matches email inputs while they have focus.

Pseudo-Classes vs Pseudo-Elements

Pseudo-classes and pseudo-elements have similar names but serve different purposes. A pseudo-class selects an existing element according to a state or condition, while a pseudo-element targets a particular part of an element or creates a styleable generated part.

Pseudo-elements are covered in the next tutorial.

When to Use Pseudo-Classes

Pseudo-classes are useful when styling depends on something other than an element's name, class, ID, or attribute value. They can respond to user interaction, identify form-control states, and select elements according to their position in the document structure.

a:hover {
  color: red;
}

input:focus {
  border-color: #0088cc;
}

li:first-child {
  font-weight: bold;
}

Using a pseudo-class can often avoid adding extra classes to HTML simply to describe a temporary state or structural position that CSS can already determine.

Summary

CSS pseudo-classes use a colon followed by a pseudo-class name to select elements according to states, conditions, or positions. Common examples include :hover, :focus, :checked, :first-child, and :nth-child().

Pseudo-classes extend ordinary selectors without requiring additional HTML classes or IDs for every state or condition. The next tutorial covers pseudo-elements, the final topic in the CSS Selectors section.