CSS Selector Reference
Every selector you need, in one table.
Universal & element selectors
| Selector | Meaning | Example |
|---|
* | Every element | * { box-sizing: border-box; } |
p, h1... | All of that tag | p { } |
Class & id
| Selector | Meaning | Example |
|---|
.class | Elements with that class | .center { } |
#id | Unique element by id | #header { } |
p.center | <p> that ALSO has .center | p.center { } |
Grouping
| Selector | Meaning | Example |
|---|
h1, h2, h3 | One rule, many elements | h1, h2 { color: navy; } |
Attribute selectors
| Selector | Matches | Example |
|---|
[attr] | With the attribute | [disabled] { } |
[attr=value] | Exact value | input[type="text"] { } |
[attr^=value] | Starts with | [href^="https"] { } |
[attr$=value] | Ends with | [href$=".pdf"] { } |
[attr*=value] | Contains | [title*="card"] { } |
[attr~=value] | Space-separated word | [class~="box"] { } |
Combinators
| Combinator | Meaning | Example |
|---|
a b (space) | Descendant (any depth) | div p { } |
a > b | Direct child only | ul > li { } |
a + b | Next sibling after a | h2 + p { } |
a ~ b | Any following sibling | h2 ~ p { } |
Pseudo-classes (state)
| Selector | Matches a state | Example |
|---|
:hover | Mouse over | a:hover { } |
:focus | Keyboard focus | input:focus { } |
:active | Being clicked | a:active { } |
:visited | Visited links | a:visited { } |
:first-child | First child | li:first-child { } |
:last-child | Last child | li:last-child { } |
:nth-child(n) | Nth child | li:nth-child(2) { } |
:nth-of-type(n) | Nth of its tag | p:nth-of-type(2) { } |
:not(x) | Everything except | :not(p) { } |
:checked | Tickled gems | input:checked { } |
:disabled / :enabled | Form states | input:disabled { } |
:empty | No children | div:empty { } |
:root | The html element | :root { --x: 1; } |
:is()/:where()` | List of selectors | :is(h1,h2,h3) { } |
:has() | "Parent of" (modern) | div:has(> img) { } |
Pseudo-elements (virtual parts)
| Selector | Styles | Example |
|---|
::before | Content before element | .badge::before { content: "★"; } |
::after | Content after element | .link::after { content: "→"; } |
::first-line | First line of text | p::first-line { } |
::first-letter | First letter | p::first-letter { } |
::selection | User-selected text | ::selection { } |
::marker | List bullet/number | li::marker { } |
::placeholder | Input placeholder | input::placeholder { } |
::backdrop | Behind modals | dialog::backdrop { } |
TL;DR
- Know .class, #id, element, and grouping cold.
- Attribute selectors query by attribute.
- Combinators: space, >, +, ~.
- States: :hover, :focus, :nth-child, :not.
- Pieces: ::before, ::after, ::selection...
- Bookmark; this page is your selector dictionary.