Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS Selectors Cheatsheet

CSS Selectors Cheatsheet

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;
}

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 :)

@huymeoo

This comment has been minimized.

Copy link

@huymeoo huymeoo commented Aug 27, 2020

Thank you

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