Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS Selectors Cheatsheet

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 'baz' 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;
}
@jeshc

This comment has been minimized.

Copy link

@jeshc jeshc commented Sep 8, 2018

Nice

@hongquangraem

This comment has been minimized.

Copy link

@hongquangraem hongquangraem commented Sep 18, 2018

Thank you

@ZXArkin

This comment has been minimized.

Copy link

@ZXArkin ZXArkin commented Oct 11, 2018

Awesome!

@quangdatpham

This comment has been minimized.

Copy link

@quangdatpham quangdatpham commented Oct 30, 2018

Thanks!

@haongo138

This comment has been minimized.

Copy link

@haongo138 haongo138 commented Dec 12, 2018

thank you !!

@andrewkusuma

This comment has been minimized.

Copy link

@andrewkusuma andrewkusuma commented Dec 26, 2018

this is awesome. Thank you for create this cheatsheet

@varkhipov

This comment has been minimized.

Copy link

@varkhipov varkhipov commented May 16, 2019

Nice job!

@ItzikDabush

This comment has been minimized.

Copy link

@ItzikDabush ItzikDabush commented May 31, 2019

Thanks!

@MOHAMMADFAISAL642

This comment has been minimized.

Copy link

@MOHAMMADFAISAL642 MOHAMMADFAISAL642 commented Jun 7, 2019

So Helpful! Thank you so much..

@imchiennb

This comment has been minimized.

Copy link

@imchiennb imchiennb commented Jul 6, 2019

Thanks for sharing <3

@irajsuhail

This comment has been minimized.

Copy link

@irajsuhail irajsuhail commented Jul 25, 2019

Thank you.

@messitrip

This comment has been minimized.

Copy link

@messitrip messitrip commented Sep 19, 2019

Best cheatsheet!

@dimasapriliansyah

This comment has been minimized.

Copy link

@dimasapriliansyah dimasapriliansyah commented Oct 15, 2019

Thank You!!

@khanhhd2211

This comment has been minimized.

Copy link

@khanhhd2211 khanhhd2211 commented Feb 27, 2020

thank you

@j960

This comment has been minimized.

Copy link

@j960 j960 commented Mar 3, 2020

thank you

@HaMa05

This comment has been minimized.

Copy link

@HaMa05 HaMa05 commented Mar 29, 2020

thanks so much !!

@classmember

This comment has been minimized.

Copy link

@classmember classmember commented May 30, 2020

This is helpful. You have a typo "containts" just above Misc Selectors ( https://gist.github.com/magicznyleszek/809a69dd05e1d5f12d01#misc-selectors )

@magicznyleszek

This comment has been minimized.

Copy link
Owner Author

@magicznyleszek magicznyleszek commented May 31, 2020

This is helpful. You have a typo "containts" just above Misc Selectors ( https://gist.github.com/magicznyleszek/809a69dd05e1d5f12d01#misc-selectors )

Thanks, fixed the typo :)

@Huynt-dev

This comment has been minimized.

Copy link

@Huynt-dev Huynt-dev commented Aug 27, 2020

Thank you

@wxx26caca

This comment has been minimized.

Copy link

@wxx26caca wxx26caca commented Mar 4, 2021

Thank you

@datnt97

This comment has been minimized.

Copy link

@datnt97 datnt97 commented Sep 9, 2021

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment