CSS Pseudo-classes

Style elements based on state and position using pseudo-classes like :hover, :focus, :nth-child, and :not.

Overview

Pseudo-classes select elements based on their state or position in the DOM conditions that cannot be expressed with a simple class or attribute selector. They are written with a single colon: `selector:pseudo-class { }` **User action states:** - `:hover` mouse is over the element - `:focus` element has keyboard/click focus - `:active` element is being clicked - `:visited` link has been visited **Form states:** - `:checked` checkbox or radio is checked - `:disabled` form control is disabled - `:required` form field has required attribute - `:valid` / `:invalid` form field passes/fails validation **Position/structural:** - `:first-child` / `:last-child` first or last sibling - `:nth-child(n)` every nth element (e.g., odd/even rows) - `:not(selector)` elements that do NOT match - `:is()` matches any of a list of selectors (reduces repetition)

Key Points

•:hover, :focus, :active style interactive states
•:focus-visible only shows focus ring for keyboard users, not mouse
•:nth-child(odd) / :nth-child(even) stripe table rows
•:first-child / :last-child target edge children without classes
•:not(.disabled) exclude elements from a rule
•:is(h1, h2, h3) shorthand for grouped structural selectors

Examples

Interactive state styles

/* Button hover and active states */
.btn {
  background: #2563eb;
  color: white;
  transition: background 0.2s;
}

.btn:hover  { background: #1d4ed8; }   /* darker on hover */
.btn:active { background: #1e40af; }   /* even darker on click */
.btn:focus-visible { outline: 3px solid #60a5fa; }  /* keyboard focus */

Striped table rows with :nth-child

tr:nth-child(even) {
  background-color: #f8f9fa;
}

/* Target first and last items specially */
li:first-child { border-top: none; }
li:last-child  { border-bottom: none; }

:nth-child(even) selects 2nd, 4th, 6th... children. :nth-child(odd) selects 1st, 3rd, 5th...

Form state styling

input:focus {
  outline: 2px solid #3b82f6;
  border-color: #3b82f6;
}

input:invalid {
  border-color: #ef4444;
  background: #fef2f2;
}

input:valid {
  border-color: #22c55e;
}

input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

Common Mistakes

Using :focus instead of :focus-visible for visual focus rings shows ring on mouse click too
Forgetting to style :focus states critical for keyboard accessibility
Confusing :nth-child(n) counting (from 1, not 0) with array indexes

Note

Always style :focus-visible on interactive elements. Never remove focus outlines without replacing them they are essential for keyboard users and required by accessibility standards.

CSS Pseudo-classes

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What is the difference between :focus and :focus-visible?