Hover, Focus and Form States
What Is It?
Pseudo-classes select an element in a state or structural position, such as hovered, keyboard-focused, checked, or first in a list.
Properties, Tags and Attributes Explained
:hover: Matches a pointing device hovering over an element.:focus-visible: Matches focus when the browser determines an indicator is needed, commonly during keyboard navigation.:checked / :disabled: Match selected checkboxes and disabled controls.:nth-child(even): Matches elements in even sibling positions.
Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.
Example 1: Accessible button states
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover, Focus and Form States</title>
<style>
button { background: #1d4ed8; color: white; padding: 12px; border: 0; border-radius: 6px; }
button:hover { background: #1e3a8a; }
button:focus-visible { outline: 3px solid #ea580c; outline-offset: 3px; }
</style>
</head>
<body>
<button type="button">Hover or Tab to me</button>
</body>
</html>Browser preview
What you see: Hover darkens the button; keyboard focus adds a visible orange outline.
Example 2: Checked choice
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover, Focus and Form States</title>
<style>
input:checked + span { color: #166534; font-weight: 700; }
</style>
</head>
<body>
<label><input type="checkbox"> <span>Send me lesson reminders</span></label>
</body>
</html>Browser preview
What you see: Checking the box changes the adjacent label text.
When and Where to Use It
Use state selectors for clear interaction feedback and keyboard focus. Make essential features work without hover on touch devices.
Common Mistake or Useful Tip
Keep a visible focus indicator; removing outlines without a replacement makes keyboard use difficult.
Try It Yourself
Add a disabled button and style button:disabled.