CSS Pseudo-classes

Pseudo-classes target elements in particular states or positions, without changing their class attributes.

:hover targets elements while pointing devices hover over them. :focus-visible is helpful for keyboard focus indicators. :checked matches selected controls. Structural pseudo-classes such as :first-child and :nth-child(even) select elements based on their position among siblings.

Pointer hover is not available in the same way on every touch device, so important controls must remain understandable without hover.

A pseudo-class is appended to the selector, as in <code>button:hover</code>, to refine matches by state.

Point at or tab to the button to test two states.

HTML

<button class="action">Try me</button>

CSS

.action { background: #1d4ed8; color: white; padding: 10px 16px; border: 0; border-radius: 8px; }
.action:hover { background: #1e40af; }
.action:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }

Rendered output

Observe: Hover darkens the background; keyboard focus adds a visible outline.

Stripe every even list item.

HTML

<ul class="rows"><li>Alpha</li><li>Beta</li><li>Gamma</li><li>Delta</li></ul>

CSS

.rows { list-style: none; padding: 0; }
.rows li { padding: 7px; }
.rows li:nth-child(even) { background: #dbeafe; }

Rendered output

Observe: The second and fourth items get the background without extra classes.

A pseudo-class is appended to the selector, as in <code>button:hover</code>, to refine matches by state.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Do not depend exclusively on :hover to communicate essential information.
• :first-child refers to sibling position, not simply the first matching tag anywhere.

Change even to odd, then use Tab to activate the button focus indicator.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Pseudo-classes reflect states and structural relationships; they are not ordinary HTML class names.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.