Pseudo-Classes (:hover, :active, :focus, :first-child)
Pseudo-classes let you style elements based on user interaction states or document position. The most famous is :hover (when the mouse hovers over an element), :active (when clicking down), and :focus (when focused via keyboard Tab).
"Think of a physical elevator button. The default state is a flat steel circle. :hover is your finger approaching it. :active is pressing the button down. :focus is the glowing yellow ring showing which floor is selected."
Deep Dive: How It Works
:hover: Triggers when the cursor hovers over the element. Essential for buttons and cards.
:active: Triggers while the user is actively holding down the mouse click or touchscreen tap (perfect for scale(0.98) tactile click feel!).
:focus and :focus-visible: Crucial for keyboard accessibility when users Tab through inputs and links.
:first-child and :last-child: Targets the first or last item in a list or grid.
:nth-child(even/odd/2n+1): Creates alternating zebra-striped table rows with zero extra classes!
Syntax Blueprint
/* Button Hover & Active States */
.btn {
background-color: #ffffff;
color: #000000;
transition: background-color 0.15s ease;
}
.btn:hover {
background-color: #e2e8f0;
}
.btn:active {
transform: scale(0.98);
}Define hover color changes and active tactile click down-states.
Core Rules to Remember
Common Beginner Traps & How to Fix Them
Forgetting the colon before pseudo-classesWhy it happens: Writing .btnhover instead of .btn:hover.
How to fix: Pseudo-classes always begin with a single colon: :hover, :focus, :active.
Live Interactive Example
Hit Run Code to see it liveYour Turn: Micro Challenge
No pressure! Edit the starter code below and test your solution with instant feedback.
Create a hover state for a link
- Write a CSS rule for a:hover setting color: #38bdf8;
Finished reading and practicing?
Mark this lesson as completed to update your course progress.