CSS Selectors Cheat Sheet
Free CSS selectors cheat sheet: classes, IDs, combinators, pseudo-classes (:hover, :nth-child, :has), pseudo-elements, attribute selectors and specificity,…
Basic Selectors
| Concept | Syntax | Example |
|---|---|---|
| Universal Targets every element. Use sparingly. | * | * { box-sizing: border-box; } |
| Element (type) Targets all elements of that tag. | tagname | p { line-height: 1.5; } |
| Class Reusable — apply to as many elements as you want. Specificity 0,1,0. | .classname | .btn { padding: 12px; } |
| ID Should be UNIQUE per page. Specificity 1,0,0. | #idname | #header { height: 80px; } |
| Attribute Targets elements with the attribute present. | [attr] | [required] { border-color: red; } |
| Grouping Apply same rule to multiple selectors. | a, b, c | h1, h2, h3 { font-family: serif; } |
Combinators
| Concept | Syntax | Example |
|---|---|---|
| Descendant (space) Any B inside A, however deep. | A B | article p { color: #333; } |
| Direct child Only B that is a DIRECT child of A (not nested deeper). | A > B | ul > li { margin: 0; } |
| Adjacent sibling The very next B sibling, right after A. | A + B | h2 + p { margin-top: 0; } |
| General sibling Any B sibling that comes after A. | A ~ B | h2 ~ p { color: gray; } |
Pseudo-classes (state)
| Concept | Syntax | Example |
|---|---|---|
| Hover / focus User-interaction states. Use :focus-visible for keyboard-only. | :hover :focus :active | a:hover { color: blue; } |
| First / last child First (or last) child of its parent. | :first-child :last-child | li:first-child { font-weight: bold; } |
| nth-child Powerful: even, odd, 2n+1, or any formula. | :nth-child(n) | tr:nth-child(odd) { background: #f5f5f5; } |
| not() Exclude elements matching the inner selector. | :not(selector) | li:not(.active) { opacity: 0.6; } |
| is() / where() :is keeps highest specificity inside; :where is always 0. | :is() :where() | :is(h1, h2, h3) { font-weight: 700; } |
| has() (parent) Modern game-changer — finally a parent selector. | :has(selector) | article:has(img) { padding: 20px; } |
| Form state Style inputs based on their validation state. | :valid :invalid :required :checked :disabled | input:valid { border: 1px solid green; } |
Pseudo-elements (parts)
| Concept | Syntax | Example |
|---|---|---|
| ::before / ::after Inject content. Requires content (even empty). Two colons (one is the legacy form). | selector::before { content: "" } | .note::before { content: "💡 "; } |
| ::first-letter Drop-caps. | ::first-letter | p::first-letter { font-size: 200%; } |
| ::selection Style the user's text selection. | ::selection | ::selection { background: yellow; } |
| ::placeholder Style the placeholder text inside inputs. | ::placeholder | input::placeholder { color: #999; } |
| ::marker Style list bullets/numbers. | ::marker | li::marker { color: red; } |
Attribute Selectors
| Concept | Syntax | Example |
|---|---|---|
| Exact match Attribute equals exactly this value. | [attr="value"] | [type="email"] { padding: 8px; } |
| Starts with Attribute value begins with this string. | [attr^="value"] | a[href^="https"] { color: green; } |
| Ends with Attribute value ends with this string. | [attr$="value"] | a[href$=".pdf"] { background: url(pdf-icon); } |
| Contains Attribute value contains this substring anywhere. | [attr*="value"] | [class*="col-"] { float: left; } |
| Word match Attribute contains this word (space-separated). | [attr~="value"] | [title~="flower"] |
Specificity & Cascade
| Concept | Syntax | Example |
|---|---|---|
| Specificity score Higher score wins ties. !important beats all (avoid). | inline > id > class > element | 1,0,0,0 | 0,1,0,0 | 0,0,1,0 | 0,0,0,1 |
| Source order When specificity is equal, the rule that appears later wins. | later wins | .btn { color: red } .btn { color: blue } → blue |
| !important Overrides everything except a more-specific !important. Use as last resort. | color: red !important; | color: red !important; |
| Cascade layers Modern way to control which stylesheet wins, without specificity wars. | @layer base, components, utilities; | @layer base { ... } |
| Inheritance Some properties (color, font) inherit; others (margin, padding) don't. | inherit / initial / unset | color: inherit; |