Complete reference of all CSS selectors
This comprehensive reference lists all CSS selectors organized by category. Selectors are patterns used to select elements you want to style. Understanding selectors is fundamental to working with CSS effectively.
Each selector includes a description of its purpose and links to live demos (where available) and the official W3C specification. Click section headings below to view related tutorials.
| Selector | Description | Links |
|---|---|---|
* |
Universal selector - selects all elements | Demo Spec |
element |
Type selector - selects all elements of that type | Demo Spec |
.class |
Class selector - selects elements with that class | Demo Spec |
#id |
ID selector - selects element with that ID | Demo Spec |
| Selector | Description | Links |
|---|---|---|
A B |
Descendant combinator - B is inside A (any level) | Demo Spec |
A > B |
Child combinator - B is direct child of A | Demo Spec |
A + B |
Adjacent sibling - B immediately follows A | Demo Spec |
A ~ B |
General sibling - B follows A (not necessarily immediately) | Demo Spec |
A || B |
Column combinator - B is in same grid/table column as A (experimental) | Spec |
| Selector | Description | Links |
|---|---|---|
[attr] |
Has attribute | Demo Spec |
[attr="value"] |
Attribute equals exactly | Demo Spec |
[attr~="value"] |
Attribute contains word | Demo Spec |
[attr^="value"] |
Attribute starts with | Demo Spec |
[attr$="value"] |
Attribute ends with | Demo Spec |
[attr*="value"] |
Attribute contains substring | Demo Spec |
[attr|="value"] |
Attribute equals or starts with value followed by hyphen | Demo Spec |
[attr="value" i] |
Case-insensitive attribute match (works with all attribute selectors) | Spec |
[attr="value" s] |
Case-sensitive attribute match (explicit, default for most attributes) | Spec |
| Selector | Description | Links |
|---|---|---|
:hover |
Mouse is over element | Demo Spec |
:active |
Element is being activated | Demo Spec |
:focus |
Element has focus | Demo Spec |
:focus-visible |
Element has keyboard focus | Demo Spec |
:focus-within |
Element or descendant has focus | Demo Spec |
| Selector | Description | Links |
|---|---|---|
:first-child |
First child of parent | Demo Spec |
:last-child |
Last child of parent | Demo Spec |
:nth-child(n) |
Nth child (1-indexed, supports formulas like 2n, 3n+1) | Demo Spec |
:nth-child(n of S) |
Nth child matching selector S (e.g., :nth-child(2 of .active) for 2nd element with .active class) |
Spec |
:nth-last-child(n) |
Nth child from end | Demo Spec |
:first-of-type |
First element of its type | Demo Spec |
:last-of-type |
Last element of its type | Demo Spec |
:nth-of-type(n) |
Nth element of its type | Demo Spec |
:only-child |
Only child of parent | Demo Spec |
:only-of-type |
Only element of its type | Demo Spec |
| Selector | Description | Links |
|---|---|---|
:checked |
Checkbox or radio is checked | Demo Spec |
:disabled |
Form element is disabled | Demo Spec |
:enabled |
Form element is enabled | Demo Spec |
:required |
Form element is required | Demo Spec |
:optional |
Form element is optional | Demo Spec |
:valid |
Form element passes validation | Demo Spec |
:invalid |
Form element fails validation | Demo Spec |
:in-range |
Input value is in range | Demo Spec |
:out-of-range |
Input value is out of range | Demo Spec |
:placeholder-shown |
Input is showing placeholder | Demo Spec |
| Selector | Description | Links |
|---|---|---|
:is(A, B) |
Matches if element matches any selector (forgiving) | Demo Spec |
:where(A, B) |
Like :is() but with 0 specificity | Demo Spec |
:has(selector) |
Parent selector - element that contains selector | Demo Spec |
:not(selector) |
Negation - does not match selector | Demo Spec |
| Selector | Description | Links |
|---|---|---|
::before |
Insert content before element | Demo Spec |
::after |
Insert content after element | Demo Spec |
::first-letter |
First letter of element | Demo Spec |
::first-line |
First line of element | Demo Spec |
::selection |
Highlighted/selected text | Demo Spec |
::marker |
List item marker | Demo Spec |
::placeholder |
Input placeholder text | Demo Spec |
| Selector | Description | Links |
|---|---|---|
:link |
Unvisited link | Demo Spec |
:visited |
Visited link | Demo Spec |
:any-link |
Matches :link and :visited | Demo Spec |
| Selector | Description | Links |
|---|---|---|
:root |
Document root element (usually <html>) | Demo Spec |
:empty |
Element with no children | Demo Spec |
:target |
Element matching URL fragment | Demo Spec |
:lang(language) |
Element with specified language | Demo Spec |
When multiple selectors target the same element, specificity determines which styles apply. Specificity is calculated as a three-part value: (ID count, Class count, Type count).
style="color: red"
Inline styles have highest specificity (except !important)
#header
Each ID adds 100 to specificity
.button, [type="text"], :hover
Each class, attribute, or pseudo-class adds 10 to specificity
div, ::before
Each element or pseudo-element adds 1 to specificity
*
The universal selector has no specificity
| Selector | Specificity | Calculation |
|---|---|---|
div |
0,0,0,1 | 1 element |
.button |
0,0,1,0 | 1 class |
#header |
0,1,0,0 | 1 ID |
div.button |
0,0,1,1 | 1 class + 1 element |
#header .nav a |
0,1,1,1 | 1 ID + 1 class + 1 element |
ul li:first-child |
0,0,1,2 | 1 pseudo-class + 2 elements |
:is(#id, .class) |
0,1,0,0 | Takes highest (ID) |
:where(#id, .class) |
0,0,0,0 | Always 0 specificity |
>, +, ~, space) add no specificity:is() and :not() take the specificity of their most specific argument:where() always has 0 specificity (useful for easy overrides):has() follows the same rules as :is()!important overrides all specificity (use sparingly)