tool / 46
CSS Selectors
Every CSS selector at a glance — basic, attribute, combinator, pseudo-class, pseudo-element.
All local
37/37
Basic4
*
Universal — selects every element.
div
Type — selects every <div>.
.class
Class selector.
#id
ID selector.
Attribute5
[attr]
Has attribute, any value.
[attr=value]
Attribute equals exact value.
[attr^=value]
Attribute starts with value.
[attr$=value]
Attribute ends with value.
[attr*=value]
Attribute contains value substring.
Combinator5
a, b
Selector list — selects either.
a b
Descendant — b inside a.
a > b
Direct child — b directly inside a.
a + b
Adjacent sibling — b right after a.
a ~ b
General sibling — any b after a.
Pseudo-class16
:hover
Element being hovered.
:focus
Element with keyboard focus.
:focus-visible
Focused via keyboard (skips mouse).
:active
Element being clicked.
:first-child
First child of its parent.
:last-child
Last child of its parent.
:nth-child(n)
nth child. Use 2n for even, 2n+1 for odd.
:nth-of-type(n)
nth child of the same type.
:not(s)
Anything except matching s.
:is(a, b)
Matches any of the selectors (low specificity).
:where(a, b)
Like :is() but always 0 specificity.
:has(s)
Parent selector — element containing s.
:empty
Element with no children or text.
:checked
Checked checkbox / radio.
:disabled
Disabled form control.
:root
Document root (usually <html>).
Pseudo-element7
::before
Generated content before the element.
::after
Generated content after the element.
::first-line
First line of text in a block.
::first-letter
First letter of a block — drop caps.
::selection
User-selected portion of text.
::placeholder
Placeholder text in an input.
::marker
List item bullet/number.