ā¤ Like
š Save
š Share
@thedevspaceio
CSS Selectors Cheatsheet
š CSS Selectors Cheatsheet
Quick overview of selector patterns for targeting elements ā from basic selectors to advanced structural and functional selectors.
ā Basic selectors ā Combinators ā Attribute selectors ā Pseudo-classes ā Pseudo-elements ā Grouping & shorthand ā Selector functions (:is, :not, :has)
#CSS #Selectors #WebDev #Frontend
Basic selectors
| Selector | Meaning | Example |
|---|---|---|
* | Universal selector | * { ... } |
E | Type selector` | p { ... } |
.class | Class selector | .btn { ... } |
#id | ID selector | #nav { ... } |
[attr] | Attribute presence | a[target] { ... } |
Combinators
| Selector | Relationship | Example |
|---|---|---|
A B | Descendant. B inside A | article p { ... } |
A > B | Direct child | ul > li { ... } |
A + B | Adjacent sibling. B immediately after A | h2 + p { ... } |
A ~ B | General sibling. B after A | h2 ~ p { ... } |
Attribute selectors
| Selector | Meaning | Example |
|---|---|---|
[attr] | Has attribute | img[alt] { ... } |
[attr=value] | Exact match | a[rel="external"] { ... } |
[attr~=value] | Word contains | [class~="lead"] { ... } |
[attr^=value] | Starts with | a[href^="https"] { ... } |
[attr$=value] | Ends with | img[src$=".svg"] { ... } |
[attr*=value] | Contains substring | [data-id*="post-"] { ... } |
Pseudo-classes (state and structural)
| Selector | Meaning | Example |
|---|---|---|
:hover | On hover | button:hover { ... } |
:focus | Element has focus | input:focus { ... } |
:active | Activated by user | a:active { ... } |
:first-child | First child of parent | li:first-child { ... } |
:last-child | Last child of parent | li:last-child { ... } |
:nth-child(n) | Select by index (1-based) | tr:nth-child(odd) { ... } |
:nth-of-type(n) | Index among type | p:nth-of-type(2) { ... } |
:not(selector) | Negation | :not(.muted) { ... } |
:disabled, :checked | Form states | input:checked + label { ... } |
Pseudo-elements
| Selector | Meaning | Example |
|---|---|---|
::before | Insert content before element | .btn::before { ... } |
::after | Insert content after element | .note::after { ... } |
::first-letter | First letter styling | p::first-letter { ... } |
::first-line | First line styling | p::first-line { ... } |
::selection | Selected text | ::selection { ... } |
Grouping & shorthand
| Selector | Meaning |
|---|---|
A, B | Group selectors. Apply same rules to both |
E:not(:first-child) | Combine structural and negation |
Selector functions
Common functional pseudo-classes and selector helpers.
| Function | Meaning / notes |
|---|---|
:not(X) | Select elements that do NOT match X. |
:is(X) | Matches if element matches any selector in list X. |
:where(X) | Like :is() but with zero specificity. |
:has(X) | Parent selector: matches an element if it contains a descendant matching X. |
:matches() | Legacy alias for :is(). Prefer :is(). |
:nth-child(an+b) | Structural numeric selector. Supports formulas like 2n, odd, even, etc. |
:nth-last-child(an+b) | Like :nth-child() but counting from the end. |
:nth-of-type(an+b) | Index among siblings of the same element type. |
:nth-last-of-type(an+b) | Like :nth-of-type() counting from the end. |
:lang(language) | Matches elements with the given language (matches lang attribute). |