Image for post
Image for post

CSS selectors cheatsheet & details

📜 CSS selectors cheatsheet

nana Jeon
nana Jeon
Feb 25, 2019 · 7 min read
Image for post
Image for post
CSS selectors cheatsheet
Image for post
Image for post
CSS selectors game by Ryan Yu
Image for post
Image for post

Image for post
Image for post
Type Selector

Image for post
Image for post
ID Selector

Image for post
Image for post
Descendant Selector

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

Image for post
Image for post
Class Selector

Image for post
Image for post
Combine the Class Selector

Image for post
Image for post
Comma Combinator

Image for post
Image for post
The Universal Selector

Image for post
Image for post
Combine the Universal Selector

Image for post
Image for post
Adjacent Sibling Selector

Image for post
Image for post
General Sibling Selector

Image for post
Image for post
Child Selector

Image for post
Image for post
First Child Pseudo-selector

Image for post
Image for post
Only Child Pseudo-selector

Image for post
Image for post
Last Child Pseudo-selector

Image for post
Image for post
Nth Child Pseudo-selector

Image for post
Image for post
Nth Last Child Selector

Image for post
Image for post
First of Type Selector

Image for post
Image for post
Nth of Type Selector

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)

Image for post
Image for post
Only of Type Selector

Image for post
Image for post
Last of Type Selector

Image for post
Image for post
Empty Selector

Image for post
Image for post
Negation Pseudo-class

Image for post
Image for post
Attribute Selector

Image for post
Image for post
Attribute Value Selector

Image for post
Image for post
Attribute Starts With Selector

Image for post
Image for post
Attribute Ends With Selector

Image for post
Image for post
Attribute Wildcard Selector

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.