CSS Selectors Cheatsheet

Hi! If you see an error or something is missing (like :focus-within for few years :P) please let me know ❤️

Element selectors

Element -- selects all h2 elements on the page

h2 {
    foo: bar;
}

Group -- selects all h1, h2 and h3 elements on the page

h1, h2, h3 {
    foo: bar;
}

Class and ID selectors

Class -- selects all elements with class attribute containing foo or only p elements with that class

.foo {
    bar: fum;
}
p.foo {
    bar: fum;
}

ID -- selects the element with 'foo' id attribute value

#foo {
    bar: fum;
}

Contextual selectors

Descendant -- selects all p elements within the infinite-level hierarchy of element #foo descendants

#foo p {
    bar: fum;
}

Adjacent sibling -- selects the sibling element p that is immediately next to h2 element

h2 + p {
    foo: bar;
}

Child -- selects all p elements that are immediate children of #foo element

#foo > p {
    bar: fum;
}

General sibling -- selects all elements p that are siblings to the h2 element

h2 ~ p {
    foo: bar;
}

Pseudo-class selectors

Pseudo-class selectors for link and user states

Unvisited link -- applies to link elements that have not been visited

a:link {
    foo: bar;
}

Visited link -- applies to link elements that have been visited

a:visited {
    foo: bar;
}

Focus state -- applies to selected .foo element that is ready for input

.foo:focus {
    bar: fum;
}

Focus within state -- applies to selected .foo element that is focused or has any focused child

.foo:focus-within {
    bar: fum;
}

Hover state -- applies when mouse pointer is over the .foo element

.foo:hover {
    bar: fum;
}

Active state -- applies when .foo element is in process of being clicked

.foo:active {
    bar: fum;
}

Pseudo-class selectors that apply to siblings

First child -- selects the specified .foo element when it is the first child of its parent

.foo:first-child {
    bar: fum;
}

Last child -- selects the specified .foo element when it is the last child of its parent

.foo:last-child {
    bar: fum;
}

Only child -- selects the specified .foo element when it is the only child of its parent

.foo:only-child {
    bar: fum;
}

First of type -- selects the h2 element when it is the first element of its type within its parent element

h2:first-of-type {
    foo: bar;
}

Last of type -- selects the h2 element when it is the last element of its type within its parent element

h2:last-of-type {
    foo: bar;
}

Only of type -- selects the h2 element when it is the only element of its type within its parent element

h2:only-of-type {
    foo: bar;
}

Nth child -- selects the nth .foo child element

.foo:nth-child(n) {
    bar: fum;
}

Nth last child -- selects the nth .foo child element counting backwards

.foo:nth-last-child(n) {
    bar: fum;
}

Nth of type -- selects the nth h2 child element of its type

h2:nth-of-type(n) {
    foo: bar;
}

Nth last of type -- selects the nth h2 child element of its type counting backwards

h2:nth-last-of-type(n) {
    foo: bar;
}

Useful n values:

odd or 2n+1 -- every odd child or element
even or 2n -- every even child or element
n -- every nth child or element
3n -- every third child or element (3, 6, 9, ...)
3n+1 -- every third child or element starting with 1 (1, 4, 7, ...)
n+6 -- all but first five children or elements (6, 7, 8, ...)
-n+5 -- only first five children or elements (1, 2, ..., 5)

Pseudo-element selectors

First letter -- selects the first letter of the specified .foo element, commonly used with :first-child to target first paragraph

.foo::first-letter {
    bar: fum;
}

First line -- selects the first line of the specified .foo element, commonly used with :first-child to target first paragraph

.foo::first-line {
    bar: fum;
}

Before -- adds generated content before the .foo element when used with content property

.foo::before {
    bar: fum;
    content: 'baz';
}

After -- adds generated content after the .foo element when used with content property

.foo::after {
    bar: fum;
    content: 'baz';
}

Attribute selectors

Present -- selects .foo elements with bar attribute present, regardless of its value

.foo[bar] {
    fum: baz;
}

Exact -- selects .foo elements where the bar attribute has the exact value of fum

.foo[bar="fum"] {
    baz: qux;
}

Whitespace separated -- selects .foo elements with bar attribute values contain specified partial value of fum (whitespace separated)

.foo[bar~="fum"] {
    baz: qux;
}

Hyphen separated -- selects .foo elements with bar attribute values contain specified partial value of fum immediately followed by hyphen (-) character

.foo[bar|="fum"] {
    baz: qux;
}

Begins with -- selects .foo elements where the bar attribute begins with fum

.foo[bar^="fum"] {
    baz: qux;
}

Ends with -- selects .foo elements where the bar attribute ends with fum

.foo[bar$="fum"] {
    baz: qux;
}

Contains -- selects .foo elements where the bar attribute contains string fum followed and preceded by any number of other characters

.foo[bar*="fum"] {
    baz: qux;
}

Misc selectors

Not -- selects .foo elements that are NOT .bar elements

.foo:not(.bar) {
    fum: baz;
}

Root -- selects the highest level parent element in the DOM

:root {
    foo: bar;
}

Empty -- selects .foo elements that have no children or whitespace inside

.foo:empty {
    bar: fum;
}

In-range and Out-of-range -- selects .foo elements that have values in or out of range

.foo:in-range {
    bar: fum;
}
.foo:out-of-range {
    bar: fum;
}

magicznyleszek/css-selectors.md