CSS Pseudo-Classes Cheat Sheet: Hover, Focus, Nth-Child & Form States

Pseudo-classes select elements in a particular state: hover and focus for interaction, nth-child for structure, and valid/checked for forms. :has() selects a parent based on a descendant. Prefer native HTML state over extra JavaScript classes when the browser already knows.

This CSS cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.

Quick reference

• hover: Pointer over the element. Pair with @media (hover: hover) for touch-friendly UIs.
• focus-visible: Keyboard (and some input) focus. Prefer this over :focus so mouse clicks need not show a ring.
• active: While the control is being pressed. Keep it short.
• nth-child: :nth-child(2n) even rows. :nth-child(n+2) from the second onward.
• not: :not(.is-hidden) excludes matches. Cannot nest some complex selectors in older browsers.
• has: .card:has(img) styles a card that contains an image. Watch performance on huge trees.
• checked: Radios, checkboxes, and <option>. Style siblings with input:checked + label.
• disabled / invalid: Form states. :user-invalid (where supported) waits until interaction.

Copy-paste examples

Focus, zebra rows, and a checked sibling

focus-visible keeps mouse users from seeing a ring on every click while keyboard users still get one.

.btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
tbody tr:nth-child(even) {
  background: #f8fafc;
}
.filters input:checked + label {
  font-weight: 700;
}
.field:has(:invalid:not(:placeholder-shown)) .hint {
  color: #b91c1c;
}

Common mistakes

• Removing :focus outlines without a :focus-visible replacement.
• Using :nth-child when you meant :nth-of-type (counts all children, not only that tag).
• Styling :invalid on page load so empty required fields look like errors immediately.
• Hover-only disclosure (menus that cannot open on a phone).

FAQ

1. Pseudo-class vs pseudo-element? Classes are states (:hover). Elements are extra boxes (::before, ::placeholder). Use one colon vs two as the modern convention.

1. Why is BLOGPH0 not my second paragraph? It matches the second child of the parent, whatever tag it is. Use :nth-of-type or a class.

1. Is BLOGPH0 safe to use? Supported in current evergreen browsers. Keep the inner selector simple on large documents.

Related CSS cheat sheets

• Css Cheat Sheet 2026
• Css Flexbox Cheat Sheet
• Css Grid Cheat Sheet

Build with this stack

When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds custom web development and also sells ready-made source code. Request a quote and tell us the stack.

Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.