CSS Pseudo Classes

Intermediate ~10 min read

What are Pseudo Classes?

Pseudo-classes select elements based on their state or position. They start with a colon : and add dynamic styling without extra HTML.

Interactive States

:hover, :active, and :focus style elements based on user interaction.

HTML

CSS

<button class='btn'>Hover & Click Me</button>
<input type='text' placeholder='Focus me' />

First & Last Child

:first-child and :last-child select the first or last element among siblings.

HTML

CSS

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

Nth Child

:nth-child(n) selects elements by position. Use numbers, odd, even, or formulas like 3n.

HTML

CSS

<div class='grid'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

Not Selector

:not() excludes elements from selection. Great for styling everything except specific items!

HTML

CSS

<div class='buttons'>
  <button>Button 1</button>
  <button class='special'>Special</button>
  <button>Button 3</button>
  <button>Button 4</button>
</div>

Link States

Style links with :link, :visited, :hover, and :active. Order matters: LVHA!

HTML

CSS

<nav>
  <a href='#'>Unvisited Link</a>
  <a href='#visited'>Visited Link</a>
  <a href='#hover'>Hover Me</a>
</nav>

Form States

Style form elements with :checked, :disabled, :enabled, :valid, :invalid.

HTML

CSS

<form>
  <input type='checkbox' id='cb' />
  <label for='cb'>Check me</label>
  <input type='text' required placeholder='Required field' />
  <button disabled>Disabled</button>
</form>

Pro Tip: Remember LVHA order for link states: Link, Visited, Hover, Active. This ensures hover and active states work correctly!

Summary

:hover, :focus, :active - Interactive states
:first-child, :last-child - Position-based
:nth-child(n) - Select by formula or keyword
:not(selector) - Exclude elements
:checked, :disabled, :valid - Form states
Pseudo-classes add no specificity weight

Quick Quiz

Which pseudo-class selects every other element?

:every-other

:nth-child(2n)

:alternate

:second-child

Previous Animations

Next Pseudo Elements

What are Pseudo Classes?

Interactive States

First & Last Child

Nth Child

Not Selector

Link States

Form States

Summary

Quick Quiz

Enjoying these tutorials?