CSS selectors cheatsheet ๐ฟ
How do CSS Selectors work with all unfamiliar symbols?
Hello, Codesigners! ๐ง๐ปโโ๏ธ๐ฟ
There are more than 70+ CSS selectors and new selectors are coming.
* 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. ๐ถ๐ป ๐ง๐ป ๐ฉ๐ป ๐ต๐ป
๐ 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
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
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
Combine the Descendant & ID Selectors
Class Selector
The CSS class selector matches elements based on the contents of their class
attribute. - MDN
Combine the Class Selector
Comma Combinator
Any element matching A and/or B. - MDN
The Universal Selector
Just Select everything!
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
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
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
First Child Pseudo-selector
The :first-child CSS pseudo-class represents the first element among a group of sibling elements. - MDN
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
Last Child Pseudo-selector
The :last-child
CSS pseudo-class represents the last element among a group of sibling elements. - MDN
Nth Child Pseudo-selector
The :nth-child()
CSS pseudo-class matches elements based on their position in a group of siblings. - MDN
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
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
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
๐คซ 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!
Nth-of-type Selector with Formula
๐ฎ 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
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
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
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
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 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 Ends With Selector
This selector will select all elements with the attribute attr
for which the value ends with val
. - MDN
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
๐ 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 game
๐ฃ 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!