Pseudo-Classes (:hover, :focus)
What are Pseudo-Classes?
Imagine a lightbulb. It is normally off, but when you flip the switch, it turns on. When it's on, its state changes, and it glows brightly.In CSS, Pseudo-Classes target HTML elements based on their current state or user interaction. They are keywords prefixed with a colon : attached to selectors:
:hover: Triggers when the user moves their mouse pointer over the element.:focus: Triggers when an input field is clicked or focused via keyboard tab navigation.:active: Triggers at the exact moment the element is being clicked.Why does it matter?
Pseudo-classes are crucial for building interactive, responsive user interfaces. They provide instant visual feedback to users, indicating that an element is clickable or that an input field is currently active. This is the difference between a static page and a dynamic web experience.Syntax Breakdown
Attach the pseudo-class to your selector using a colon: without spaces:
button:hover { background-color: blue; } — Changes background when hovered.input:focus { border-color: green; } — Highlights the active input border.Common Mistakes
button :hover (with a space) tells the browser to target hovered child elements *inside* a button, rather than the button itself. Always write them contiguous: button:hover.:link, :visited, :hover, :active.Quick Reference
selector:hover — Applied when hovered.selector:focus — Applied when element receives focus.selector:active — Applied when element is clicked.Your Task
Add a style declaration inside the `button:hover` block to set the `background-color` to `yellow`.
index.html
Type code above to start the lesson.
Live Preview