CSS Selectors Cheat Sheet — Combinators, Pseudo-Classes & Modern :has()

Comprehensive guide to basic selectors, child/sibling combinators, attribute matching, structural pseudo-classes, and modern :is(), :where(), and :has().

Combinators & Attributes

div > p

Direct child combinator: matches only <p> elements that are immediate children of <div>

h2 + p

Adjacent sibling: matches the first <p> element immediately following an <h2>

a[href^="https://"]

Attribute prefix selector: matches links beginning with "https://"

img[src$=".png"]

Attribute suffix selector: matches images ending with ".png"

Pseudo-Classes & Modern Selectors

li:nth-child(odd) / li:nth-child(even)

Zebra striping alternating list items or table rows

card:has(img)

Parent selector: style .card ONLY if it contains an <img> inside it

:is(h1, h2, h3):hover

Compact matching across multiple tags without specificity ballooning