Pseudo-Classes
Pseudo-classes represent element states or structural conditions. Common examples include :hover, :focus-visible, :active, :disabled, :checked, :first-child, :nth-child(), and :not().
Interactive states should consider keyboard users. For example, replacing a visible focus indicator with only :hover creates an accessibility problem.
Pseudo-Class :nth-child(2)
State-Based Styling
button:hover {
transform: translateY(-1px);
}
button:focus-visible {
outline: 3px solid currentColor;
outline-offset: 3px;
}
li:nth-child(2n) {
background: #f8fafc;
}
input:not(:placeholder-shown) {
border-color: green;
}💡 Pseudo-classes allow styles to respond to interaction and document state.
Key Takeaways
- Use
:focus-visiblefor accessible keyboard focus indicators. - Structural pseudo-classes can reduce unnecessary classes in markup.
Knowledge Check
Which pseudo-class is specifically useful for keyboard-visible focus styling?