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

Basic Selectors

Selector	Matches	Example
*	Every element	* { box-sizing: border-box; }
element	All elements of that type	p { line-height: 1.6; }
.class	Elements with that class	.card { border-radius: 8px; }
#id	Element with that ID	#header { height: 64px; }
el, el	Multiple selectors	h1, h2, h3 { font-weight: 700; }

Combinators

Selector	Matches	Example
A B	B anywhere inside A (descendant)	nav a { color: white; }
A > B	B that is a direct child of A	ul > li { list-style: none; }
A + B	B immediately after A (adjacent sibling)	h2 + p { margin-top: 0; }
A ~ B	All B siblings after A (general sibling)	h2 ~ p { color: gray; }

Attribute Selectors

Selector	Matches
[attr]	Elements with attribute attr present
[attr="val"]	attr exactly equals "val"
[attr~="val"]	attr contains "val" as a whole word (space-separated list)
[attr\|="val"]	attr equals "val" or starts with "val-"
[attr^="val"]	attr starts with "val"
[attr$="val"]	attr ends with "val"
[attr*="val"]	attr contains "val" anywhere
[attr="val" i]	Case-insensitive match (append i)

Structural Pseudo-Classes

Selector	Matches
:root	The root element (usually <html>)
:first-child	Element that is the first child of its parent
:last-child	Element that is the last child of its parent
:nth-child(n)	nth child — n can be a number, even, odd, or formula like 2n+1
:nth-last-child(n)	nth child counting from the end
:first-of-type	First sibling of its element type
:last-of-type	Last sibling of its element type
:nth-of-type(n)	nth sibling of its element type
:only-child	Element with no siblings
:only-of-type	Element with no siblings of the same type
:empty	Element with no children (including text)
:not(selector)	Elements that do not match the selector
:is(sel, sel)	Matches any of the listed selectors (forgiving)
:where(sel, sel)	Like :is() but adds no specificity
:has(selector)	Elements that contain a matching descendant

UI & Link Pseudo-Classes

Selector	Matches
:link	Unvisited links
:visited	Visited links
:hover	Element being hovered
:active	Element being activated (clicked)
:focus	Element that has keyboard focus
:focus-visible	Focus ring shown only via keyboard (not mouse click)
:focus-within	Element or any descendant has focus
:checked	Checked checkbox, radio, or selected option
:disabled	Disabled form element
:enabled	Enabled form element
:required	Required form field
:optional	Optional form field
:valid	Form field with valid value
:invalid	Form field with invalid value
:placeholder-shown	Input showing its placeholder
:read-only	Non-editable element
:read-write	Editable element
:target	Element whose ID matches the URL fragment
:lang(code)	Element with matching language attribute

Pseudo-Elements

Selector	Matches
::before	Inserts generated content before the element's content
::after	Inserts generated content after the element's content
::first-line	First line of a block element
::first-letter	First letter of a block element
::selection	Text selected by the user
::placeholder	Placeholder text of an input or textarea
::marker	List item marker (bullet or number)
::backdrop	Backdrop behind a fullscreen element or dialog

Specificity

Selector type	Value	Example
Inline style	(1,0,0,0)	<div style="color:red">
ID selector	(0,1,0,0)	#header
Class, attribute, pseudo-class	(0,0,1,0)	.active, [type], :hover
Element, pseudo-element	(0,0,0,1)	div, ::before
Universal (*), combinators	(0,0,0,0)	*, >, +, ~
!important	Overrides all	color: red !important
:is(), :not(), :has()	Takes the highest specificity of its argument	:is(#id, .class)
:where()	Always zero specificity	:where(.card, #box)

Client-Side Processing

Input Data Stays on Device

Instant Local Execution

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

CSS Validator

Validate CSS syntax online. Checks for unclosed braces, missing colons, empty rules, and invalid property/value pairs using CSS.supports().

CSS Beautifier / Formatter

Format, indent, and beautify minified or messy CSS code — with configurable indentation and sorting options.

CSS Minifier

Compress and minify CSS code to reduce file size and speed up page loads.

CSS to Tailwind Converter

Convert CSS declarations to Tailwind CSS utility classes — supports margin, padding, flex, grid, typography, colors, and arbitrary value fallbacks.

JSON Cheat Sheet

A complete JSON reference — data types, syntax rules, nested structures, common patterns, and gotchas. Quick lookup for developers working with JSON APIs and configs.

YAML Cheat Sheet

A complete YAML reference — scalars, sequences, mappings, multi-line strings, anchors, aliases, and gotchas. Quick lookup for developers working with YAML configs.