:hover, :focus, :active, :nth-child

Pseudo-classes target elements based on state or position. Hover, focus, nth-child are the most common.

style.css v3.1

style.css — the CSS rules

li {
  padding: 8px;
  background: white;
  border: 1px solid #ddd;
  margin: 4px 0;
  list-style: none;
  border-radius: 4px;
  transition: all 0.2s;
}
li:hover { background: #a0c000; color: white; }
li:nth-child(odd) { background: #f5f5f5; }
li:nth-child(odd):hover { background: #a0c000; color: white; }
li:first-child { border-left: 4px solid #58a6ff; }
li:last-child { font-weight: bold; }

index.html — the HTML structure (what the CSS targets)

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

Live preview updates as you type

🧠 How it works

:hover — mouse is over the element. :focus — element has focus (e.g. an input you're typing in). :active — element is being clicked (mouse button held down). :nth-child(n) — the nth child of its parent. :nth-child(odd) / :nth-child(even) — stripes (great for tables). :first-child / :last-child — first or last child of parent. :checked — for checkboxes/radios that are checked. Pseudo-classes can be chained: li:nth-child(odd):hover.

✏️ Try these changes

Change :nth-child(odd) to :nth-child(even)
→ stripes flip
Add li:nth-child(3) { background: #f85149; color: white; }
→ third item becomes red
Change :hover to :active
→ color only changes WHILE clicking
Change li:first-child border-left color from #58a6ff to #f85149
→ first item's accent becomes red

← Previous lab

border-radius — round the corners

Next lab →

@media — responsive design