Image for post
Image for post

CSS selectors cheatsheet & details

📜 CSS selectors cheatsheet

nana Jeon
nana Jeon
Feb 25, 2019 · 7 min read

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.

Image for post
Image for post
CSS selectors cheatsheet
Image for post
Image for post
CSS selectors game by Ryan Yu

🔮 Go to download the and enjoy

No worries. It’s all free.

Image for post
Image for post

🔎 Dive into CSS selector.

I will list the infographic along with 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. -

Image for post
Image for post
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. -

Image for post
Image for post
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. -

Image for post
Image for post
Descendant Selector

Combine the Descendant & ID Selectors

Image for post
Image for post
Combine the Descendant & ID Selectors

Class Selector

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

Image for post
Image for post
Class Selector

Combine the Class Selector

Image for post
Image for post
Combine the Class Selector

Comma Combinator

Any element matching A and/or B. -

Image for post
Image for post
Comma Combinator

The Universal Selector

Just Select everything!

Image for post
Image for post
The Universal Selector

Combine the Universal Selector

Image for post
Image for post
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 . -

Image for post
Image for post
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 . -

Image for post
Image for post
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. -

Image for post
Image for post
Child Selector

First Child Pseudo-selector

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

Image for post
Image for post
First Child Pseudo-selector

Only Child Pseudo-selector

The :only-child CSS 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. -

Image for post
Image for post
Only Child Pseudo-selector

Last Child Pseudo-selector

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

Image for post
Image for post
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. -

Image for post
Image for post
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. -

Image for post
Image for post
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. -

Image for post
Image for post
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. -

Image for post
Image for post
Nth of Type Selector

Nth-of-type Selector with Formula

Image for post
Image for post
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. -

Image for post
Image for post
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. -

Image for post
Image for post
Last of Type Selector

Empty Selector

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

Image for post
Image for post
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. -

Image for post
Image for post
Negation Pseudo-class

Attribute Selector

Attribute selectors are a special kind of selector that will match elements based on their 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. -

Image for post
Image for post
Attribute Selector

Attribute Value Selector

Image for post
Image for post
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

Image for post
Image for post
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

Image for post
Image for post
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

Image for post
Image for post
Attribute Wildcard Selector

🎉 Congratulations, you’ve completed 🎉

Design & Code Repository

Hello there, I am nana, living in Sydney, multidisciplinary…

nana Jeon

Written by

nana Jeon

UI / Visual designer who loves CSS 🧙🏻‍♀️

Design & Code Repository

Hello there, I am nana, living in Sydney, multidisciplinary Visual Designer with coding skills; web, graphic and print. Specialized in interactive & responsive UI with accessibility in mind.

nana Jeon

Written by

nana Jeon

UI / Visual designer who loves CSS 🧙🏻‍♀️

Design & Code Repository

Hello there, I am nana, living in Sydney, multidisciplinary Visual Designer with coding skills; web, graphic and print. Specialized in interactive & responsive UI with accessibility in mind.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface.

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox.

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store