CSS Selectors Reference

*

Selects all elements.

* { box-sizing: border-box; }

element

Selects all elements of the given type.

p { color: blue; }

.class

Selects all elements with the given class.

.card { padding: 1rem; }

#id

Selects the element with the given ID.

#hero { min-height: 100vh; }

[attr]

Selects elements with the specified attribute.

[disabled] { opacity: 0.5; }

[attr='value']

Selects elements where attribute equals value.

[type='text'] { border: 1px solid; }

[attr~='value']

Selects elements where attribute contains the word.

[class~='active'] {}

[attr^='value']

Selects elements where attribute starts with value.

[href^='https'] { color: green; }

[attr$='value']

Selects elements where attribute ends with value.

[src$='.png'] {}

[attr*='value']

Selects elements where attribute contains value as substring.

[href*='github'] {}

A B

Selects B elements that are descendants of A.

nav a { text-decoration: none; }

A > B

Selects B that are direct children of A.

ul > li { list-style: disc; }

A + B

Selects B immediately following A.

h2 + p { margin-top: 0; }

A ~ B

Selects all B siblings that follow A.

h2 ~ p { color: gray; }

:hover

Element is being hovered by a pointing device.

a:hover { color: blue; }

:focus

Element has received focus.

input:focus { outline: 2px solid blue; }

:active

Element is being activated (e.g. clicked).

button:active { transform: scale(0.98); }

:visited

Link has been visited.

a:visited { color: purple; }

:first-child

Element is the first child of its parent.

li:first-child { font-weight: bold; }

:last-child

Element is the last child of its parent.

li:last-child { border-bottom: none; }

:nth-child(n)

Matches every nth child element.

tr:nth-child(even) { background: #f5f5f5; }

:not(selector)

Negates the match.

li:not(.active) { opacity: 0.6; }

:is(selector)

Matches any of the given selectors.

:is(h1, h2, h3) { font-weight: bold; }

:where(selector)

Like :is() but contributes zero specificity.

:where(h1, h2) { margin-top: 0; }

:has(selector)

Matches if any of the selectors match descendants.

article:has(img) { display: grid; }

:checked

Input element is checked.

input:checked + label { color: green; }

:disabled

Form element is disabled.

button:disabled { opacity: 0.4; }

:placeholder-shown

Input whose placeholder is currently visible.

input:placeholder-shown { border-color: gray; }

:empty

Element has no children.

p:empty { display: none; }

:root

The root element of the document.

:root { --color: #fff; }

::before

Inserts content before the element.

p::before { content: '→ '; }

::after

Inserts content after the element.

p::after { content: ' ←'; }

::placeholder

Styles the placeholder text of an input.

input::placeholder { color: gray; }

::selection

Styles the highlighted text selection.

::selection { background: yellow; }

::first-line

Styles the first line of a block element.

p::first-line { font-weight: bold; }

::marker

Styles the list item marker.

li::marker { color: red; }