CSS Selectors cheat sheet

Universal Selector (*)

The universal selector selects all elements on the page.

* {
  margin: 0;
  padding: 0;
}

Type Selector

The type selector selects all elements of the given type.

p {
  color: blue;
}

Class Selector (.class)

The class selector selects all elements with the specified class.

.example {
  font-size: 20px;
}

ID Selector (#id)

The ID selector selects a single element with the specified ID.

#unique {
  background-color: yellow;
}

.class1.class2

Selects all elements with both class1 and class2.

.name1.name2 {
  color: green;
}

.class1 .class2

Selects all elements with class2 that are descendants of an element with class1.

.name1 .name2 {
  color: purple;
}

[attribute]

Selects elements that have the specified attribute.

[title] {
  border-bottom: 1px dotted;
}

[attribute="value"]

Selects elements with the specified attribute and value.

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

[attribute~="value"]

Selects elements with an attribute value containing a specified word.

[class~="intro"] {
  color: red;
}

[attribute|="value"]

Selects elements with an attribute value equal to a specified value or starting with that value followed by a hyphen.

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

[attribute^="value"]

Selects elements with an attribute value starting with a specified value.

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

[attribute$="value"]

Selects elements with an attribute value ending with a specified value.

a[href$=".pdf"] {
  color: green;
}

[attribute*="value"]

Selects elements with an attribute value containing a specified value.

a[href*="w3schools"] {
  color: orange;
}

Descendant Selector ( )

Selects all elements that are descendants of a specified element.

div p {
  color: purple;
}

Child Selector (>)

Selects all elements that are direct children of a specified element.

ul > li {
  list-style-type: none;
}

Adjacent Sibling Selector (+)

Selects an element that is the next sibling of a specified element.

h1 + p {
  margin-top: 0;
}

General Sibling Selector (~)

Selects all siblings of a specified element.

h1 ~ p {
  color: gray;
}

:active

Selects the active link.

a:active {
  color: red;
}

:hover

Selects elements when they are being hovered over by the mouse pointer.

a:hover {
  text-decoration: underline;
}

:focus

Selects elements when they are focused.

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

:checked

Selects every checked <input> element.

input:checked {
  background-color: yellow;
}

:default

Selects the default <input> element.

input:default {
  border: 2px solid green;
}

:disabled

Selects every disabled <input> element.

input:disabled {
  background-color: lightgray;
}

:enabled

Selects every enabled <input> element.

input:enabled {
  background-color: white;
}

:empty

Selects every element that has no children (including text nodes).

p:empty {
  display: none;
}

:first-child

Selects the first child element of a parent.

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

:first-of-type

Selects the first element of its type among siblings.

p:first-of-type {
  color: navy;
}

:fullscreen

Selects the element that is in full-screen mode.

:fullscreen {
  background-color: black;
}

:in-range

Selects input elements with a value within a specified range.

input:in-range {
  border: 1px solid green;
}

:indeterminate

Selects input elements that are in an indeterminate state.

input:indeterminate {
  background-color: orange;
}

:invalid

Selects all input elements with an invalid value.

input:invalid {
  border: 2px solid red;
}

:lang(language)

Selects elements with a specific lang attribute.

p:lang(it) {
  color: olive;
}

:last-child

Selects the last child element of a parent.

p:last-child {
  font-style: italic;
}

:last-of-type

Selects the last element of its type among siblings.

p:last-of-type {
  color: maroon;
}

:link

Selects all unvisited links.

a:link {
  color: blue;
}

:not(selector)

Selects every element that is not the specified element.

:not(p) {
  color: teal;
}

:nth-child(n)

Selects elements based on their position in a group of siblings.

li:nth-child(2) {
  background-color: lightgrey;
}

:nth-last-child(n)

Selects elements based on their position among siblings, counting from the last child.

p:nth-last-child(2) {
  color: purple;
}

:nth-of-type(n)

Selects elements of a given type based on their position among siblings of the same type.

p:nth-of-type(3) {
  color: orange;
}

:nth-last-of-type(n)

Selects elements of a given type based on their position among siblings of the same type, counting from the last child.

p:nth-last-of-type(2) {
  color: pink;
}

:only-of-type

Selects every element that is the only one of its type among its siblings.

p:only-of-type {
  color: lime;
}

:only-child

Selects every element that is the only child of its parent.

p:only-child {
  color: magenta;
}

:optional

Selects input elements with no "required" attribute.

input:optional {
  border: 1px solid gray;
}

:out-of-range

Selects input elements with a value outside a specified range.

input:out-of-range {
  border: 1px solid red;
}

:read-only

Selects input elements with the "readonly" attribute specified.

input:read-only {
  background-color: lightblue;
}

:read-write

Selects input elements that are editable (without the "readonly" attribute).

input:read-write {
  background-color: white;
}

:required

Selects input elements with the "required" attribute specified.

input:required {
  border: 1px solid red;
}

:root

Selects the document's root element.

:root {
  --main-color: #06c;
}

:target

Selects the current active target element.

#news:target {
  background-color: yellow;
}

:valid

Selects all input elements with a valid value.

input:valid {
  border: 2px solid green;
}

:visited

Selects all visited links.

a:visited {
  color: purple;
}

::after

Inserts content after the content of an element.

p::after {
  content: " Read more.";
  color: blue;
}

::before

Inserts content before the content of an element.

p::before {
  content: "Note: ";
  font-weight: bold;
}

::first-letter

Selects the first letter of an element.

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

::first-line

Selects the first line of an element.

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

::marker

Selects the markers of list items.

li::marker {
  color: red;
}

::placeholder

Selects the placeholder text of input elements.

input::placeholder {
  color: gray;
  font-style: italic;
}

::selection

Selects the portion of an element

that is selected by a user.

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

Grouping Selector (,)

Selects all elements that match any of the selectors in the group.

h1, h2, h3 {
  margin-bottom: 0.5em;
}

element,element

Selects all specified elements.

div, p {
  margin: 0;
}

element.class

Selects all elements of a given type with a specified class.

p.intro {
  color: blue;
}

element element

Selects all elements of a specified type within another element.

div p {
  color: purple;
}

element > element

Selects all elements of a specified type that are direct children of another element.

div > p {
  color: green;
}

element + element

Selects the first sibling of a specified element.

div + p {
  margin-top: 0;
}

element ~ element

Selects all siblings of a specified element.

p ~ ul {
  margin-top: 0;
}