CSS Selectors Cheatsheet

Universal

Selects all elements on the page

* { margin: 0; padding: 0; }

Type/Element

Selects all elements of the specified type

p { color: blue; }

Class

Selects elements with the specified class attribute

.button { background: red; }

ID

Selects the element with the specified id attribute

#header { height: 60px; }

Attribute

Selects elements with the specified attribute

[disabled] { opacity: 0.5; }

Has Attribute

Selects elements that have the specified attribute

input[required] { border: 2px solid red; }

Exact Match

Selects elements with attribute exactly equal to value

input[type="text"] { width: 200px; }

Word Match

Selects elements with attribute containing value as a whole word (space-separated)

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

Prefix Match (Lang)

Selects elements with attribute equal to or starting with value followed by hyphen

[lang|="en"] { quotes: """ """; }

Starts With

Selects elements with attribute value starting with specified value

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

Ends With

Selects elements with attribute value ending with specified value

a[href$=".pdf"] { background: url(pdf-icon.png); }

Contains

Selects elements with attribute value containing specified value anywhere

[class*="card"] { border-radius: 8px; }

Descendant

Selects all B elements that are descendants of A (any level deep)

nav a { text-decoration: none; }

Direct Child

Selects all B elements that are direct children of A

ul > li { list-style: disc; }

Adjacent Sibling

Selects the B element immediately after A (same parent)

h1 + p { font-size: 1.2em; }

General Sibling

Selects all B elements that follow A (same parent)

h1 ~ p { color: gray; }

Hover

Selects element when mouse is over it

button:hover { background: blue; }

Active

Selects element while being activated (clicked)

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

Focus

Selects element when it has keyboard focus

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

Focus Visible

Selects element when focused via keyboard (not mouse)

button:focus-visible { outline: 2px dashed blue; }

Focus Within

Selects element when it or any descendant has focus

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

Visited

Selects links that have been visited

a:visited { color: purple; }

Link

Selects unvisited links

a:link { color: blue; }

Checked

Selects checked inputs (checkbox, radio, option)

input:checked { accent-color: green; }

Disabled

Selects disabled form elements

button:disabled { opacity: 0.5; cursor: not-allowed; }

Enabled

Selects enabled form elements

input:enabled { background: white; }

Required

Selects required form elements

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

Optional

Selects optional form elements (not required)

input:optional { border-left: 3px solid gray; }

Valid

Selects form elements with valid values

input:valid { border-color: green; }

Invalid

Selects form elements with invalid values

input:invalid { border-color: red; }

Target

Selects element with id matching URL fragment

#section:target { background: yellow; }

First Child

Selects element that is first child of its parent

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

Last Child

Selects element that is last child of its parent

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

Only Child

Selects element that is the only child of its parent

p:only-child { font-size: 1.2em; }

First of Type

Selects first element of its type among siblings

p:first-of-type { margin-top: 0; }

Last of Type

Selects last element of its type among siblings

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

Only of Type

Selects element that is only one of its type among siblings

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

Nth Child

Selects element based on its position among siblings (1-indexed)

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

Nth Last Child

Selects element based on position counting from end

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

Nth of Type

Selects element based on position among same-type siblings

p:nth-of-type(2) { font-style: italic; }

Nth Last of Type

Selects element based on position among same-type siblings from end

img:nth-last-of-type(1) { border: 2px solid blue; }

Empty

Selects elements with no children (including text)

td:empty { background: #f5f5f5; }

Root

Selects the document root element (html)

:root { --primary-color: blue; }

Negation

Selects elements that do not match the selector

input:not([type='submit']) { width: 100%; }

Is (Matches-Any)

Matches any element that matches one of the selectors in the list

:is(h1, h2, h3) { font-family: serif; }

Browser: Chrome 88+, Firefox 78+, Safari 14+

Where

Same as :is() but with zero specificity

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

Browser: Chrome 88+, Firefox 78+, Safari 14+

Has (Parent Selector)

Selects element if it contains elements matching the selector

article:has(img) { padding: 20px; }

Browser: Chrome 105+, Safari 15.4+, Firefox 121+

Before

Inserts content before element's content

.quote::before { content: '"'; color: gray; }

After

Inserts content after element's content

.external-link::after { content: ' ↗'; }

First Letter

Selects the first letter of block-level elements

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

First Line

Selects the first line of block-level elements

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

Selection

Styles text selected by user

::selection { background: yellow; color: black; }

Placeholder

Styles placeholder text in form inputs

input::placeholder { color: #999; font-style: italic; }

Marker

Styles list item markers (bullets, numbers)

li::marker { color: blue; font-weight: bold; }

Browser: Chrome 86+, Firefox 68+, Safari 11.1+

Backdrop

Styles the backdrop behind dialog or fullscreen elements

dialog::backdrop { background: rgba(0,0,0,0.5); }