WebToolsPlanet
CSS Tools

CSS Selector Cheat Sheet

A complete reference for every CSS selector type — from basic element selectors to complex pseudo-classes and attribute matchers.

Last updated: May 21, 2026

Client-Side Processing
Input Data Stays on Device
Instant Local Execution
Something wrong with this tool? Report it

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is CSS Selector Cheat Sheet?

CSS selectors determine which HTML elements a rule applies to. This cheat sheet covers all selector categories defined in the CSS specification: basic selectors, attribute selectors, structural pseudo-classes, UI pseudo-classes, pseudo-elements, and combinators.

Each entry shows the selector syntax, a brief description, and an example. Use it as a quick lookup when you need the exact syntax for an attribute selector or a specific `nth-child` expression.

How to Use CSS Selector Cheat Sheet

Scroll through the sections or use your browser's search (Ctrl+F / Cmd+F) to find a specific selector. Each row shows the selector pattern, what it matches, and an example.

Common Use Cases

  • Front-end developers looking up the exact syntax for :nth-child or attribute selectors.
  • Students learning CSS who want a structured reference for all selector types.
  • Code reviewers checking whether a selector is valid and what it targets.
  • Developers migrating from a CSS framework to custom CSS who need selector basics.

Example Input and Output

Quick selector reference examples from the cheat sheet.

Selector
a[href^="https"]
p:nth-child(2n+1)
.card > .title
h2 ~ p
What it matches
Links where href starts with "https"
Odd paragraph children
Direct .title children of .card
All <p> siblings after <h2>

Browser support

Most selectors in this cheat sheet have universal browser support. Very new selectors (:has(), :is(), :where()) may have limited support in older browsers — check MDN or caniuse.com for specific version support.

Frequently Asked Questions

What is CSS specificity?

Specificity determines which CSS rule wins when multiple rules target the same element. ID selectors (0,1,0) beat class selectors (0,0,1) which beat element selectors (0,0,0,1). Inline styles (1,0,0,0) beat all. !important overrides all.

What is the difference between : and :: in CSS?

Single colon (:) is used for pseudo-classes (:hover, :focus, :nth-child). Double colon (::) is used for pseudo-elements (::before, ::after, ::first-line). Modern CSS requires :: for pseudo-elements, though single colon still works in most browsers for backwards compatibility.

Related Tools