CSS

CSS Selectors Cheat Sheet — Every Selector and Combinator

Selectors decide which elements a rule applies to. This reference covers the full set — from the basics to the modern functional pseudo-classes — with a plain-English description of each.

Put it into practice with the matching tool.

Try the CSS filter playground →

Basic selectors

*Every element

pEvery <p> element (type selector)

.cardEvery element with class="card"

#headerThe element with id="header"

.card.featuredElements with both classes

a.btnEvery <a> that also has class="btn"

h1, h2, h3Selector list — applies to all three

Combinators

div pDescendant — any <p> inside a <div>, at any depth

div > pChild — only direct children

h2 + pNext sibling — the <p> immediately after an <h2>

h2 ~ pSubsequent siblings — every <p> after an <h2>

Attribute selectors

[disabled]Has the attribute, whatever its value

[type="email"]Attribute exactly equals the value

[class~="btn"]Space-separated list contains the word

[href^="https"]Value starts with

[href$=".pdf"]Value ends with

[href*="blog"]Value contains the substring

[lang|="en"]Value is "en" or starts with "en-"

[href$=".pdf" i]Add i before ] to match case-insensitively

Pseudo-classes: state

:hoverPointer is over the element

:focusElement has keyboard focus

:focus-visibleFocused and a focus ring should show (keyboard, not mouse)

:focus-withinThe element or any descendant has focus

:activeBeing clicked or pressed

:visitedLink the user has already visited

:targetElement matching the current URL fragment

:checkedChecked checkbox, radio, or selected option

:disabled / :enabledForm control state

:required / :optionalWhether the field is required

:valid / :invalidPasses or fails validation

:placeholder-shownInput is empty and showing its placeholder

Pseudo-classes: position

:first-child / :last-childFirst or last child of its parent

:only-childThe sole child of its parent

:nth-child(3)The third child

:nth-child(odd)Odd-numbered children (also: even)

:nth-child(3n)Every third child

:nth-child(n+4)The fourth child onward

:nth-last-child(2)Second from the end

:first-of-typeFirst sibling of its element type

:nth-of-type(2)Second sibling of that type

:emptyNo children and no text at all

:rootThe <html> element — where custom properties go

Functional pseudo-classes

:not(.active)Elements that do not match the selector

:is(h1, h2, h3) aShorthand for a long selector list

:where(h1, h2) aLike :is() but adds zero specificity

.card:has(img)A card that contains an image — the "parent" selector

label:has(+ input:focus)Style based on a sibling's state

Pseudo-elements

::beforeInserts generated content before — needs content:

::afterInserts generated content after

::first-lineFirst rendered line of a block

::first-letterFirst letter — for drop caps

::selectionThe part the user has highlighted

::placeholderAn input's placeholder text

::markerThe bullet or number of a list item

::backdropThe layer behind a dialog or fullscreen element

Specificity (lowest to highest)

p, ::beforeType and pseudo-element — 0,0,1

.card, [href], :hoverClass, attribute, pseudo-class — 0,1,0

#headerID — 1,0,0

style="..."Inline style — beats all selectors

!importantOverrides everything — avoid where you can

:where(...)Always contributes 0 — useful for defaults

More cheat sheets

Regex →Git →Markdown →Cron →