css selector
CSS-selectors.dev

CSS selectors cheatsheet ๐ŸŒฟ

How do CSS Selectors work with all unfamiliar symbols?

nana ๐Ÿง™๐Ÿปโ€โ™€๏ธ
Design & Code Repository
7 min readFeb 25, 2019

--

Hello, Codesigners! ๐Ÿง™๐Ÿปโ€โ™€๏ธ๐ŸŒฟ

There are more than 70+ CSS selectors and new selectors are coming.

css selector
70+ CSS selectors
* Still confused how CSS Selectors actually work with all unfamiliar symbols?

* Are you forgetting what selectors to use?

* Are you unsure whether there is better selectors to use instead?

* Are you afraid if you are missing out new selectors?

If you ever get those feelingsโ€ฆ

Donโ€™t panic! ๐Ÿ˜ฑ

Donโ€™t Fret. ๐Ÿฅถ

And please donโ€™t ignore it! ๐Ÿซ 

Even if I have been a front-end engineer for more than decades, I have been experiencing the same all the time. ๐Ÿคซ

To help you solve this problem, I created a CSS selectors course to help you master CSS selectors.

  • No more guesswork, Target Correct Elements ๐ŸŽฏ
  • Donโ€™t fear complexity, Understand Advanced Selectors โœจ
  • No more unnecessary JavaScript, Go with CSS Selectors ๐ŸŒฟ

CSS selectors course is for everyone. ๐Ÿ‘ถ๐Ÿป ๐Ÿ‘ง๐Ÿป ๐Ÿ‘ฉ๐Ÿป ๐Ÿ‘ต๐Ÿป

css selector

๐Ÿ”Ž Letโ€™s dive into CSS selector.

I will list the infographic along with MDN definitions to make things easier for you.

Type Selector

The CSS type selector matches elements by node name. In other words, it selects all elements of the given type within a document. - MDN

css selector type selector
Type Selector

ID Selector

Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document. - MDN

css selector ID selector
ID Selector

Descendant Selector

Any element matching B that is a descendant of an element matching A (that is, a child, or a child of a child, etc.). the combinator is one or more spaces or dual greater than signs. - MDN

Descendant Selector
Descendant Selector

Combine the Descendant & ID Selectors

Combine the Descendant & ID Selectors
Combine the Descendant & ID Selectors

Class Selector

The CSS class selector matches elements based on the contents of their class attribute. - MDN

Class Selector

Combine the Class Selector

Combine the Class Selector

Comma Combinator

Any element matching A and/or B. - MDN

Comma Combinator selector
Comma Combinator

The Universal Selector

Just Select everything!

The Universal Selector

Combine the Universal Selector

Combine the Universal Selector

Adjacent Sibling Selector

The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element. - MDN

Adjacent Sibling Selector

General Sibling Selector

The general sibling combinator (~) separates two selectors and matches the second element only if it follows the first element (though not necessarily immediately), and both are children of the same parent element. - MDN

General Sibling Selector

Child Selector

The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the children of elements matched by the first. - MDN

Child Selector

First Child Pseudo-selector

The :first-child CSS pseudo-class represents the first element among a group of sibling elements. - MDN

First Child Pseudo-selector

Only Child Pseudo-selector

The :only-child CSS pseudo-class represents an element without any siblings. This is the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity. - MDN

Only Child Pseudo-selector

Last Child Pseudo-selector

The :last-child CSS pseudo-class represents the last element among a group of sibling elements. - MDN

Last Child Pseudo-selector

Nth Child Pseudo-selector

The :nth-child() CSS pseudo-class matches elements based on their position in a group of siblings. - MDN

Nth Child Pseudo-selector

Nth Last Child Selector

The :nth-last-child() CSS pseudo-class matches elements based on their position among a group of siblings, counting from the end. - MDN

Nth Last Child Selector

First of Type Selector

The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements. - MDN

First of Type Selector

Nth of Type Selector

The :nth-of-type() CSS pseudo-class matches elements of a given type, based on their position among a group of siblings. - MDN

Nth of Type Selector

๐Ÿคซ Psst! Still confused how CSS Selectors actually work with all unfamiliar symbols? My CSS Selector online course helps you master CSS selectors, practice with real-world scenarios, and level up your front-end skills. Check it out!

css selector

Nth-of-type Selector with Formula

Nth-of-type Selector
๐Ÿ”ฎ Note::nth-of-type(even)
:nth-of-type(odd)
:nth-of-type(2)
:nth-of-type(2n)
:nth-of-type(3n-1)
:nth-of-type(2n+2)

Only of Type Selector

The :only-of-type CSS pseudo-class represents an element that has no siblings of the same type. - MDN

Only of Type Selector

Last of Type Selector

The :last-of-type CSS pseudo-class represents the last element of its type among a group of sibling elements. - MDN

Last of Type Selector

Empty Selector

The :empty CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace). Comments, processing instructions, and CSS content do not affect whether an element is considered empty. - MDN

Empty Selector

Negation Pseudo-class

The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class. - MDN

Negation Pseudo-class

Attribute Selector

Attribute selectors are a special kind of selector that will match elements based on their attributes and attribute values. Their generic syntax consists of square brackets ([]) containing an attribute name followed by an optional condition to match against the value of the attribute. Attribute selectors can be divided into two categories depending on the way they match attribute values: Presence and value attribute selectors and Substring value attribute selectors. - MDN

Attribute Selector

Attribute Value Selector

Attribute Value Selector

Attribute Starts With Selector

This selector will select all elements with the attribute attr for which the value starts with val. - MDN

Attribute Starts With Selector

Attribute Ends With Selector

This selector will select all elements with the attribute attr for which the value ends with val. - MDN

Attribute Ends With Selector

Attribute Wildcard Selector

This selector will select all elements with the attribute attr for which the value contains the substring val. (A substring is simply part of a string, e.g. "cat" is a substring in the string "caterpillar".) - MDN

Attribute Wildcard Selector
Attribute Wildcard Selector

๐ŸŽ‰ Congratulations, youโ€™ve completed ๐ŸŽ‰

๐Ÿ•น Letโ€™s play game on CodePen

๐Ÿ’Œ Any feedback or challenge

Iโ€™d love to hear your thoughts or say hello ๐Ÿ‘‹ :

โ€ข ๐Ÿคœ๐Ÿค› Connect with me on LinkedIn or X.

โ€ข ๐Ÿ‘ Give me a clap if you liked this post.

PS- CSS selectors cheatsheet

I created and distributed a printable CSS selectors cheat sheet in 2019, and an updated version (2024) is now available at CSS-selectors.dev.

Print this cheatsheet out and stick it on the wall. Donโ€™t memorize them, just peek at it when needed. I hope this infographic helps you find proper CSS selectors quickly and saves your time.

CSS selectors cheatsheet 2019

๐Ÿ•น๏ธCSS Selectors game

Old version CSS Selectors game 2019

๐Ÿ“ฃ Remind! My CSS Selector online course helps you master CSS selectors, practice with real-world scenarios, and level up your front-end skills. Check it out!

css selector

--

--