CSS Pseudo-classes

Imagine driving your car. Normally, the dashboard lights are off. But if your fuel level drops, a small low-fuel alert light turns on automatically. If you step on the gas pedal, the engine revs. The car is responding to its changing state. CSS pseudo-classes are those dashboard sensors. They allow you to style elements only when they enter a specific state—like when a user hovers their mouse over a button, clicks a text link, or selects the third card in a list grid.

In this page:

Interactive State Selectors
Structural child selectors
Form validation Selectors
The negation Selector (:not)
Styling by attribute Target

Interactive State Selectors

Interactive pseudo-classes target elements only when users interact with them, offering: hover (mouse hover), active (on click press), and focus (when focused using the Tab key or selected).

Note: Always pair your hover style states with focus styles to keep your site accessible to keyboard-only users.

Warning: Write your links' interactive pseudo-classes in the correct order: :link, :visited, :hover, :active (LVHA) to ensure they work.

Example: Interactive State Selectors

css

<style>
a:hover {
  color: red;
}
a:active {
  color: darkred;
}
a:focus {
  outline: 2px solid blue;
}
</style>
<a href="#">Hover, click, or tab to me</a>

Structural child selectors

Structural child selectors target elements based on their index position in the parent element's child tree, offering first-child (first item), last-child (last item), and nth-child (specific mathematical offsets or patterns).

Note: Use :nth-child(even) or :nth-child(odd) to quickly create readable zebra-striped tables.

Warning: The nth-child selector counts all child elements regardless of their type, which can cause target errors if you mix divs and paragraphs.

Example: Structural child selectors

css

<style>
li:first-child {
  font-weight: bold;
}
li:last-child {
  color: red;
}
li:nth-child(even) {
  background: #eee;
}
</style>
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

Form validation Selectors

Form validation pseudo-classes allow you to style input fields dynamically based on their current validation state, offering: required (mandatory fields), invalid (failed pattern check), and checked (active toggles).

Note: Use invalid styles to highlight input formatting errors in real-time.

Warning: Browser default invalid borders can look jarring if not customized with clean CSS focus rules.

Example: Form validation Selectors

css

<style>
input:required {
  border-color: orange;
}
input:invalid {
  border-color: red;
}
input:checked {
  outline: 2px solid green;
}
</style>
<input type="text" required>
<input type="checkbox" checked>

The negation Selector (:not)

The negation selector (:not) allows you to target elements that do not match a specified selector rule. This is incredibly useful for applying general styles to lists of items while excluding specific elements.

Note: Use the :not selector to apply margins to all items except the very last one.

Warning: Do not nest multiple :not selectors inside each other, as it makes your stylesheets difficult to read and maintain.

Example: The negation Selector (:not)

css

<style>
li:not(:last-child) {
  margin-bottom: 10px;
}
</style>
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three (no margin below)</li>
</ul>

Styling by attribute Target

The target selector (:target) allows you to style a specific element on your page when its ID matches the active hash symbol (#) in the browser URL path. This is incredibly useful for highlighting section targets dynamically.

Note: Combine the :target selector with smooth scrolling to build clean, interactive on-page jump links.

Warning: Target styles only activate when the URL hash actively matches the element's ID.

Example: Styling by attribute Target

css

<style>
:target {
  background: yellow;
}
</style>
<a href="#section1">Jump to Section 1</a>
<div id="section1">Section 1 content</div>

Common Mistakes

Forgetting that pseudo-classes must always be prefixed with a colon (:) in your stylesheets.
Writing link pseudo-classes in the wrong order, causing hover or active styles to fail rendering.
Assuming structural child selectors (like nth-child) ignore sibling elements of different types.

Chapter Summary

Pseudo-classes target elements only when they enter a specific interaction or structural state.
Style interactive states cleanly using :hover, :active, and :focus selectors.
Target specific element indices using :first-child, :last-child, or :nth-child, and negate rules using :not.

Browser Support

Standard CSS pseudo-classes have native support across all modern web browsers.

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Combinators Next Lesson → CSS Pseudo-elements