CSS Selectors Reference

Universal selector - selects all elements

* { margin: 0; }

element

Type selector - selects all elements of type

p { color: blue; }

.class

Class selector - selects elements with class

.intro { font-size: 18px; }

#id

ID selector - selects element with specific ID

#header { height: 60px; }

[attr]

Attribute selector - has attribute

[disabled] { opacity: 0.5; }

[attr=val]

Attribute equals value

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

[attr~=val]

Attribute contains word

[class~="btn"] { cursor: pointer; }

[attr|=val]

Attribute starts with value (or value-)

[lang|="en"] { color: blue; }

[attr^=val]

Attribute starts with value

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

[attr$=val]

Attribute ends with value

[src$=".png"] { border: none; }

[attr*=val]

Attribute contains value

[class*="col-"] { float: left; }

A B

Descendant - B inside A (any depth)

div p { margin: 10px; }

A > B

Child - B is direct child of A

ul > li { list-style: none; }

A + B

Adjacent sibling - B immediately after A

h2 + p { margin-top: 0; }

A ~ B

General sibling - B after A (same parent)

h2 ~ p { color: gray; }

A, B

Grouping - selects both A and B

h1, h2 { font-weight: bold; }

:hover

Mouse over element

a:hover { color: red; }

:focus

Element has focus

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

:active

Element being activated (clicked)

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

:visited

Visited link

a:visited { color: purple; }

:focus-within

Element or descendant has focus

form:focus-within { border-color: blue; }

:focus-visible

Focus via keyboard navigation

button:focus-visible { outline: 2px solid; }

:checked

Checked input/option

input:checked { accent-color: green; }

:disabled

Disabled form element

input:disabled { opacity: 0.5; }

:enabled

Enabled form element

input:enabled { border-color: gray; }

:required

Required form element

input:required { border-left: 3px solid red; }

:optional

Optional form element

input:optional { border-left: none; }

:valid

Valid form element

input:valid { border-color: green; }

:invalid

Invalid form element

input:invalid { border-color: red; }

:placeholder-shown

Input showing placeholder

input:placeholder-shown { font-style: italic; }

:target

Element targeted by URL fragment

:target { background: yellow; }

:first-child

First child of parent

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

:last-child

Last child of parent

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

:nth-child(n)

Nth child of parent

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

:nth-last-child(n)

Nth child from end

li:nth-last-child(2) { color: red; }

:only-child

Only child of parent

p:only-child { margin: 0; }

:first-of-type

First of its type in parent

p:first-of-type { font-size: 1.2em; }

:last-of-type

Last of its type in parent

p:last-of-type { margin-bottom: 0; }

:nth-of-type(n)

Nth of its type in parent

p:nth-of-type(2n) { color: blue; }

:only-of-type

Only of its type in parent

img:only-of-type { display: block; }

:empty

Element with no children

div:empty { display: none; }

:root

Document root element

:root { --color: blue; }

:not(sel)

Negation - not matching selector

p:not(.intro) { font-size: 14px; }

:is(sel)

Matches any of the selectors

:is(h1,h2,h3) { color: navy; }

:where(sel)

Like :is() but zero specificity

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

:has(sel)

Parent selector - contains match

div:has(> img) { padding: 10px; }

::before

Insert content before element

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

::after

Insert content after element

a::after { content: " ↗"; }

::first-line

First line of text

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

::first-letter

First letter of text

p::first-letter { font-size: 2em; }

::selection

User-selected text

::selection { background: yellow; }

::placeholder

Input placeholder text

::placeholder { color: #999; }

::marker

List item marker

::marker { color: red; }