CSS Selectors Cheatsheet
A quick reference for CSS selector syntax — type, class, ID, attribute, pseudo-class, pseudo-element, and combinator selectors.
Sections
Basic Selectors
| Selector | Example | Matches |
|---|---|---|
Type | p | All <p> elements |
Class | .card | Elements with class="card" |
ID | #header | Element with id="header" |
Universal | * | Every element |
Multiple | h1, h2 | All <h1> and <h2> elements |
Attribute Selectors
| Selector | Matches |
|---|---|
[attr] | Elements with the attribute present |
[attr=val] | Attribute equals exactly val |
[attr~=val] | Attribute contains val as a whitespace-separated word |
[attr|=val] | Attribute starts with val or val- |
[attr^=val] | Attribute starts with val |
[attr$=val] | Attribute ends with val |
[attr*=val] | Attribute contains val anywhere |
[attr=val i] | Case-insensitive match |
Combinators
| Selector | Example | Matches |
|---|---|---|
Descendant (space) | div p | <p> anywhere inside a <div> |
Child (>) | ul > li | <li> that is a direct child of <ul> |
Adjacent sibling (+) | h2 + p | <p> immediately after an <h2> |
General sibling (~) | h2 ~ p | All <p> siblings after an <h2> |
Pseudo-Classes
| Selector | Matches |
|---|---|
:hover | Element being hovered |
:focus | Element with keyboard/pointer focus |
:active | Element being activated (e.g. clicked) |
:visited | <a> that has been visited |
:link | <a> not yet visited |
:checked | Checked checkbox or radio input |
:disabled | Disabled form element |
:enabled | Enabled form element |
:required | Input with required attribute |
:optional | Input without required attribute |
:valid / :invalid | Input that passes / fails constraint validation |
:first-child | Element that is the first child of its parent |
:last-child | Element that is the last child of its parent |
:nth-child(n) | Element that is the nth child (1-based, e.g. 2n+1 = odd) |
:nth-of-type(n) | nth element of its type among siblings |
:first-of-type | First element of its type in its parent |
:last-of-type | Last element of its type in its parent |
:only-child | Element with no siblings |
:only-of-type | Only element of its type in its parent |
:empty | Element with no children (including text) |
:not(selector) | Element that does NOT match selector |
:is(selector-list) | Matches any of the listed selectors (forgiving) |
:has(selector) | Element that contains a matching descendant |
:root | Root element of the document — usually <html> |
:target | Element whose id matches the URL fragment |
Pseudo-Elements
| Selector | Creates / Matches |
|---|---|
::before | Inserts generated content before the element's content |
::after | Inserts generated content after the element's content |
::first-line | The first line of a block element |
::first-letter | The first letter of a block element |
::placeholder | Placeholder text of an input or textarea |
::selection | Portion of the element selected by the user |
::marker | Marker box of a list item (bullet or number) |
Specificity
Specificity is calculated as (ID, Class/Attribute/Pseudo-class, Type/Pseudo-element). Higher specificity wins.
| Selector Type | Specificity |
|---|---|
Inline style | 1,0,0,0 — highest |
ID selector (#id) | 0,1,0,0 |
Class, attribute, pseudo-class | 0,0,1,0 |
Type, pseudo-element | 0,0,0,1 |
Universal (*), combinators | 0,0,0,0 |
!important | Overrides all — avoid except as last resort |