CSS selectors cheatsheet & details

๐Ÿ™Big thanks for many interest 

Recently, Iโ€™ve been diving into CSS selectors.

There are so many CSS selectors with unfamiliar symbols, > . , * + ~ [ ] etc, so I was often confused about how CSS selectors work. Eventually, I straightened them out in my head and re-designed them how I understand.

* In fact, I would have wanted to organize them on a single A4 sized page to save papers and save the Earth but I couldn’t, because there are so many selectors I wanted to add so I had to go over more than one page. It is all four A4 pages, except the cover pages.

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

๐Ÿ”ฎ Go to download the CSS selectors cheatsheet and enjoy the game๐Ÿ•น

No worries. Itโ€™s all free.

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

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 ๐ŸŽ‰

๐Ÿ“– Articles

๐Ÿ•น CodePen

See the Pen CSS selectors cheatsheet by nana (@nana8) on CodePen.0

๐Ÿ’Œ Any questions or feedback

I would love to hear your feedback on how I can make it better for you. Please leave your comments below or through my Twitter.

๐Ÿ™ Big thanks to Ryan Yu for helping me make CSS selectors game. Ryan Yu is the author of<FrontEnd30 /> where I learnt many cool front-end techniques.

๐ŸŽ‰ Happy codesign today

Thanks for reading,
please share it.
Related
Case study: web design focused on interaction.
Case study: web design focused on interaction.
web
interaction
UX/UI
The story of editorial design for book ยฒ/โ‚‚: The Art of Toy Story 4
The story of editorial design for book ยฒ/โ‚‚: The Art of Toy Story 4
Print
Editorial
The story of editorial design for book ยน/โ‚‚: Cookbook
The story of editorial design for book ยน/โ‚‚: Cookbook
Print
Editorial