Pseudo-Classes

Learning objectives#

• Style interaction states: hover, focus, active
• Style form states: checked, disabled, invalid
• Select by position with :first-child and :nth-child()
• Use :not(), :is() and :has()

Explanation#

A pseudo-class starts with a single colon and describes a state: a:hover, input:focus, button:disabled.

Interaction: :hover (mouse over), :focus (selected for typing), :focus-visible (focused by keyboard), :active (being pressed).

Structure: :first-child, :last-child, :nth-child(2), :nth-child(odd), :nth-child(3n) select by position among siblings.

Logic: :not(.active) excludes; :is(h1, h2, h3) groups; :has(img) selects a parent that contains an image — CSS’s long-awaited “parent selector”.

Link order matters: :link, :visited, :hover, :active (remember “LoVe HAte”).

Code example: States and positions#

1<style>
2  body { font-family: sans-serif; }
3  .btn { padding: 8px 16px; border: 0; border-radius: 6px; background: #2965f1; color: white; cursor: pointer; }
4  .btn:hover { background: #1d4ed8; }
5  .btn:active { transform: scale(0.97); }
6  .btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
7  .btn:disabled { background: #94a3b8; cursor: not-allowed; }
8

9  tr:nth-child(even) { background: #f1f5f9; }
10  li:first-child { font-weight: bold; }
11  li:not(:last-child) { border-bottom: 1px solid #ddd; }
12

13  input:checked + label { color: #16a34a; text-decoration: line-through; }
14  .card:has(input:checked) { background: #dcfce7; }
15  .card { padding: 6px; border-radius: 6px; }
16</style>
17

18<button class="btn">Hover / Tab / Click me</button>
19<button class="btn" disabled>Disabled</button>
20

21<table><tr><td>Row 1</td></tr><tr><td>Row 2</td></tr><tr><td>Row 3</td></tr><tr><td>Row 4</td></tr></table>
22

23<ul><li>First item</li><li>Second</li><li>Last</li></ul>
24

25<div class="card"><input type="checkbox" id="t1"><label for="t1">Buy milk</label></div>

A button that darkens on hover, shrinks when pressed and shows an orange ring on keyboard focus; a greyed disabled button; striped table rows; a bold first list item; and a to-do that turns green and crossed out when ticked.

Step-by-step explanation#

1. :hover, :active and :focus-visible give the button three interactive states.
2. :disabled styles the button with the disabled attribute.
3. tr:nth-child(even) stripes every second row.
4. li:not(:last-child) adds a divider under every item except the last.
5. input:checked + label styles the label next to a ticked checkbox.
6. .card:has(input:checked) styles the parent card when its checkbox is ticked.

Real-world use case#

Common mistakes#

Best practices#

• Give every interactive element hover, focus-visible and active states
• Use :disabled and cursor: not-allowed for disabled controls
• Use :has() for parent styling instead of extra JavaScript
• Prefer :focus-visible over :focus for outlines

Remember this#

Practice exercise#

1li:nth-child(3n) { color: red; }
2input[type="text"]:focus { border: 2px solid blue; outline: none; }

Mini quiz#

Want more? Practise all CSS MCQs · CSS interview questions

Related topics#

My notes#

Saved in this browser.