Cheat Sheet

CSS Selectors

Complete CSS selectors reference: basic selectors, combinators, attribute selectors, pseudo-classes, pseudo-elements, modern selectors (:is, :where, :has), and specificity.

CSS selectors target HTML elements to apply styles. Understanding selector types, combinators, pseudo-classes, and specificity is essential to writing predictable CSS.

Basic Selectors

Selector	Example	Selects
Type	p	All <p> elements
Class	.card	All elements with class="card"
ID	#header	The element with id="header"
Universal	*	All elements
Grouped	h1, h2	Both h1 and h2 elements

Combinators

div p

Descendant

Any <p> inside a <div> (any depth)

div > p

Child

Direct <p> children of <div> only

h1 + p

Adjacent sibling

The first <p> immediately after an <h1>

h1 ~ p

General sibling

All <p> elements that follow an <h1> (same parent)

col || td

Column

Elements in a table column (CSS Grid Level 1)

Attribute Selectors

[attr]Has the attribute, regardless of value

[attr="val"]Attribute equals exactly "val"

[attr^="val"]Attribute starts with "val"

[attr$="val"]Attribute ends with "val"

[attr*="val"]Attribute contains "val" anywhere

[attr~="val"]Attribute is a space-separated list that includes "val"

[attr|="val"]Attribute equals "val" or starts with "val-"

[attr="val" i]Case-insensitive match

Pseudo-classes

:hoverMouse is over the element

:focusElement has keyboard focus

:focus-withinElement or its descendant is focused

:activeElement is being activated (clicked)

:visitedVisited link

:linkUnvisited link

:checkedChecked checkbox or radio

:disabledDisabled form element

:enabledEnabled form element

:requiredRequired form field

:validValid form field value

:invalidInvalid form field value

:first-childFirst child of its parent

:last-childLast child of its parent

:nth-child(n)nth child (n can be 2n, 2n+1, odd, even…)

:nth-last-child(n)nth child counted from the end

:first-of-typeFirst sibling of its type

:last-of-typeLast sibling of its type

:nth-of-type(n)nth sibling of its type

:only-childOnly child of its parent

:only-of-typeOnly sibling of its type

:emptyHas no children (incl. text nodes)

:rootRoot element of the document (<html>)

:not(selector)Elements that do NOT match the selector

:targetElement targeted by the URL fragment (#id)

:placeholder-shownInput showing placeholder text

Modern Selectors

:is(h1, h2, h3)Baseline

Matches any of the listed selectors. Reduces repetition. Specificity = most specific argument.

:is(h1, h2, h3) + p { … }

:where(h1, h2)Baseline

Same as :is() but always contributes zero specificity — great for resets and utility layers.

:where(section) h2 { … }

:has(selector)Baseline

Selects an element IF it contains a descendant matching the selector. The "parent selector" finally!

form:has(:invalid) { … }

:not(s1, s2)Baseline

:not() now accepts a selector list (multiple arguments). Previously only one selector was allowed.

li:not(:first-child, :last-child)

:nth-child(n of S)Partial

Counts only elements matching selector S. E.g. :nth-child(2 of .highlight) = second .highlight child.

li:nth-child(2 of .active)

Pseudo-elements

::beforeGenerated content inserted before the element's content (requires content:)

::afterGenerated content inserted after the element's content

::first-lineFirst line of a block element

::first-letterFirst letter of a block element

::placeholderPlaceholder text of an input

::selectionText selected by the user

::markerList item marker (bullet or number)

::backdropFull-screen overlay behind a <dialog>

Specificity

1,0,0,0

Inline style

style=""

0,1,0,0

ID selector

#id

0,0,1,0

Class / attr / pseudo-class

.cls :hover [attr]

0,0,0,1

Element / pseudo-element

div ::before

• * (universal selector) has specificity 0,0,0,0

• !important overrides specificity — use sparingly

• :where() has zero specificity; :is() and :has() take specificity of their most specific argument

• When specificity is equal, the last rule in source order wins

Build layouts visually with our CSS Grid Generator →

Define columns, rows, and gaps — then copy the CSS instantly.