CSS Selectors Cheat Sheet — Complete Reference with Examples

Complete CSS selector reference, ordered by how often you'll actually use them. Format CSS with the CSS formatter; minify before deploy with CSS minifier.

Basic selectors

Selector	Matches
*	Every element (the universal selector)
div	Every <div> element
.btn	Elements with class="btn"
#nav	Element with id="nav"
div.btn	<div> with class="btn"
.btn.primary	Elements with both classes "btn" AND "primary"
.btn, .link	Anything matching ".btn" OR ".link"

Combinators

Selector	Matches
div p	Any <p> inside any <div> (descendant)
div > p	Any <p> that's a direct child of <div>
h2 + p	<p> immediately after a sibling <h2>
h2 ~ p	Every <p> following a sibling <h2>

Attribute selectors

Selector	Matches
[disabled]	Elements with the disabled attribute (any value)
[type="email"]	Exact attribute match
[href^="https"]	href that starts with "https"
[href$=".pdf"]	href that ends with ".pdf"
[href*="utilko"]	href that contains "utilko"
[lang|="en"]	lang exactly "en" OR starting with "en-"
[class~="btn"]	class is exactly "btn" OR contains it as a separate word
[type="email" i]	Case-insensitive match (modern browsers)

Pseudo-classes — state

Selector	Matches
:hover	Element under the cursor
:focus	Element with keyboard/click focus
:focus-visible	Focus from keyboard navigation only (modern; better default than :focus)
:focus-within	Element OR any descendant has focus
:active	Element being pressed
:checked	Checked checkbox/radio
:disabled / :enabled	Form control state
:required / :optional	Form field requirement
:valid / :invalid	Form validation state
:placeholder-shown	Input is empty (showing placeholder)
:visited	Link the user has visited (limited styling for privacy)
:target	Element matching URL fragment (#section)

Pseudo-classes — structural

Selector	Matches
:first-child	First child of its parent
:last-child	Last child
:only-child	Only child (no siblings)
:nth-child(2)	2nd child
:nth-child(odd) / :nth-child(even)	Alternating
:nth-child(3n+1)	1st, 4th, 7th, … (formula)
:nth-last-child(1)	Counting from the end
:nth-of-type(2)	2nd of its element type (ignores other tags)
:first-of-type / :last-of-type	First/last of element type
:empty	Element with no children (including text)
:not(.btn)	Anything NOT matching ".btn"
:is(h1, h2, h3)	Matches any in the list (specificity = highest)
:where(h1, h2)	Like :is() but specificity is 0
:has(img)	Element that contains an <img> (modern; "parent selector")

Pseudo-elements (use ::)

Selector	Targets
::before	Generated content before element's content
::after	Generated content after
::first-letter	First letter (drop caps)
::first-line	First rendered line
::selection	Highlighted/selected text
::placeholder	Input's placeholder text
::marker	List item bullet/number
::backdrop	Backdrop behind <dialog> / fullscreen

Specificity (the silent ranking)

When multiple rules match, specificity decides which wins. Higher number → wins.

Selector	Specificity (a, b, c)
Inline style="..."	(1, 0, 0, 0) — beats anything in CSS
#id	(0, 1, 0, 0)
.class / [attr] / :hover	(0, 0, 1, 0)
tag / ::before	(0, 0, 0, 1)
*	(0, 0, 0, 0)
!important	Wins anyway (use sparingly; debt)

Tie-breaker: later rule in source order wins.

Common patterns

/* Style the parent of an element with X */
.card:has(> .featured) { border: 2px solid gold; }

/* Every link except internal */
a:not([href^="/"]):not([href^="#"]) { color: var(--external); }

/* First paragraph after every h2 */
h2 + p { font-size: 1.1em; }

/* Zebra-stripe table rows */
tbody tr:nth-child(even) { background: #f9fafb; }

/* Hide element when input is focused */
.tooltip { display: block; }
input:focus + .tooltip { display: none; }

/* Style button only when valid form */
form:valid button[type="submit"] { background: #059669; }

/* Empty state for an empty container */
.list:empty::after { content: 'No results'; color: #888; }

Related tools

Format CSS: CSS formatter. Minify for production: CSS minifier. Pick brand-safe colors: color converter. Preview rendered HTML to test selectors: HTML preview.