Modern CSS

Pseudo-Classes

Use pseudo-classes to style user interaction, structure, and state changes such as hover, focus, checked, and nth-child.

By TechCoder TeamLast updated: 2026-06-02
In a Nutshell

Use pseudo-classes to style user interaction, structure, and state changes such as hover, focus, checked, and nth-child. This hands-on tutorial focuses on practical implementation of pseudo-classes concepts.

Pseudo-Classes

Pseudo-classes let you style an element based on state or position without adding extra classes in your HTML.

Common Interaction States

.button:hover {
  background: #1d4ed8;
}

.button:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 3px;
}

.button:active {
  transform: scale(0.98);
}

These selectors make interfaces feel interactive while preserving clean markup.

Form and UI States

input:required {
  border-color: #f59e0b;
}

input:valid {
  border-color: #10b981;
}

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

.toggle:checked {
  accent-color: #2563eb;
}

Structural Pseudo-Classes

.list li:first-child {
  font-weight: 700;
}

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

.list li:nth-child(odd) {
  background: #f8fafc;
}

These are useful for alternating rows, featured items, and list cleanup.

Best Practices

  • prefer :focus-visible over removing focus outlines
  • use pseudo-classes for state before adding JS-only solutions
  • keep selectors readable and close to the component they affect

Next Step

Continue to Pseudo-Elements to create decorative and content-level styling hooks without extra markup.