CSS Selectors Cheatsheet

Selects all elements of the specified type

p { color: blue; }

Selects all elements with the specified class attribute

.btn { padding: 10px; }

Selects the element with the specified id attribute

#header { height: 60px; }

Selects all elements in the document

* { box-sizing: border-box; }

Selects elements that have the specified attribute

[disabled] { opacity: 0.5; }

Selects elements with attribute exactly equal to value

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

Selects elements with attribute containing value as a whole word

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

Selects elements with attribute value starting with specified value

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

Selects elements with attribute value ending with specified value

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

Selects elements with attribute containing specified substring

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

Selects all descendants of the ancestor element

nav a { text-decoration: none; }

Selects only direct children of the parent element

ul > li { list-style: square; }

Selects the immediate next sibling element

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

Selects all following siblings of the element

h2 ~ p { margin-left: 20px; }

Groups multiple selectors to apply same styles

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

Selects elements that are the first child of their parent

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

Selects elements that are the last child of their parent

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

Selects elements based on their position using a formula

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

Selects elements counting from the last child

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

Selects elements that are the only child of their parent

p:only-child { margin: 0; }

Selects first element of its type among siblings

p:first-of-type { text-indent: 2em; }

Selects last element of its type among siblings

span:last-of-type { margin-right: 0; }

Selects elements of type based on position formula

p:nth-of-type(2n) { background: #eee; }

Selects elements that are the only one of their type

article p:only-of-type { font-size: 1.1em; }

Selects elements that have no children or text

td:empty { background: #ccc; }

Selects the document root element (html in HTML)

:root { --main-color: #333; }

Selects checked checkboxes and radio buttons

input:checked + label { color: green; }

Selects disabled form elements

input:disabled { background: #ddd; }

Selects enabled form elements

input:enabled { border-color: blue; }

Selects form elements with required attribute

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

Selects form elements without required attribute

input:optional { border-color: gray; }

Selects form elements with valid input

input:valid { border-color: green; }

Selects form elements with invalid input

input:invalid { border-color: red; }

Selects the currently focused element

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

Selects element containing a focused descendant

form:focus-within { box-shadow: 0 0 5px blue; }

Selects input elements showing placeholder text

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

Selects elements that are not editable by user

input:read-only { background: #f0f0f0; }

Selects elements that are editable by user

input:read-write { background: white; }

Selects unvisited links

a:link { color: blue; }

Selects visited links

a:visited { color: purple; }

Selects elements when mouse hovers over them

button:hover { background: #eee; }

Selects elements being activated (clicked)

a:active { color: red; }

Selects element matching the URL fragment identifier

#section:target { background: yellow; }

Selects elements that do not match the selector

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

Matches any element in the selector list with forgiving parsing

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

Like :is() but with zero specificity

:where(article, section) p { line-height: 1.6; }

Selects parent elements containing specified descendants

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

Selects nth child matching the selector among siblings

li:nth-child(2 of .active) { color: red; }

Creates a pseudo-element as first child of selected element

.icon::before {
  content: '★';
  margin-right: 5px;
}

Creates a pseudo-element as last child of selected element

.link::after {
  content: ' →';
}

Selects the first line of a block-level element

p::first-line {
  font-variant: small-caps;
}

Selects the first letter of a block-level element

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

Selects the placeholder text in form inputs

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

Selects the portion of text highlighted by user

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

Selects the marker box of list items

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

Selects the backdrop behind fullscreen or dialog elements

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