CSS
selectors
cheatsheet
#>.,*+~:[](){}
by nana jeon
Feb 2019
CSS selectors cheatsheet by nana jeon is licensed
under a Creative Commons Attribution-NonCommercial-NoDerivatives
4.0 International License.
CSS selectors cheatsheet
Selector name HTML CSS Infographic
<a/>
Type Selector <b/> a {} a b c
<c/>
<..id=“a”/>
ID Selector <..id=“b”/> #a {} #a #b #c
<..id=“c”/>
* ID is not recommended as a selector
<a>
<b>
a
<a/><b/>
Child </b>
Selector <c> a > b {} b c
<a/><b/>
</c>
</a> a b a b
<a>
<b>
a
<a/><b/>
Descendant </b>
Selector <c> a b {} b c
<a/><b/>
</c>
</a> a b a b
<a id=“a”> #a
<b>
Combine <a/><b/>
Descendant & ID </b>
<c> #a b {} b c
Selectors <a/><b/>
</c>
</a> a b a b
Class <.. class=“a”/>
<.. class=“b”/> .a {} .a .b .c
Selector <.. class=“c”/>
Combine the Class <a class=“x”/>
<b class=“x”/> b.x {} a.x c.x
Selector <c class=“x”/> b.x
<a/>
Comma Combinator <b/>
Selector <c/> a, c {} a b c d
<d/>
<a/>
Universal <b/>
Selector <c/> * {} a b c d
<d/>
<a>
<b>
a
<a/><b/>
Combine Universal </b>
Selector <c> a * {} b c
<a/><b/>
</c>
</a> a b a b
1/4 © Designed by nana jeon 2019
<a/>
Adjacent Sibling <b/>
Selector <b/> a + b {} a b b b
<b/>
<a/>
<b/>
General Sibling <b/> a ~ b {} a b b c b
Selector <c/>
<b/>
<b/>
<b/> b b b
<b/>
First Child Pseudo first-child
b:first-child {}
Selector <a/>
<b/> a b b
<b/> *first-child is `a` element, not `b` element.
So there is nothing to be selected.
<a>
<b/> b:only-child {}
Only Child Pseudo </a> a a a
<a>
Selector <b/><b/>
</a>
<a>
a :only-child {}
b b b a b c
<a/><b/><c/>
</a>
<b/>
<b/> b b b
Last Child Pseudo
b:last-child {} last-child
Selector <b/>
<b/> b b c
<c/>
*last-child is `c` element, not `b` element.
So there is nothing to be selected.
<b/> 1 2 3
<b/>
<b/> b b b
1 2 3
<a/>
<b/> a b b
<b/> b:nth-child(2) {}
Nth Child Pseudo 1 2 3
Selector <b/>
b a b
<a/>
<b/>
* nth-child(2) is `a` element, not `b` element.
So there is nothing to be selected.
<a> a
<a/><b/><c/> a :nth-child(2) {}
</a> a b c
a :nth-last-child(2) {} a
<a> c:nth-last-child(2) {} a b c d
<a/> 4 3 2 1
Nth Last Child <b/>
Selector <c/>
<d/> a:nth-last-child(2) {}
</a> a
b:nth-last-child(2) {}
a b c d
d:nth-last-child(2) {} 4 3 2 1
2/4 © Designed by nana jeon 2019
<a/>
First of Type <b/>
<a/> b:first-of-type {} a b a b
Selector
<b/>
1 2 3 4
a:nth-of-type(2) {} a b a b a b a
1 2 3 4
<a/> a:nth-of-type(even) {}
<b/> a b a b a b a
Nth of Type <a/>
<b/>
Selector <a/>
<b/> 1 2 3 4
<a/> a:nth-of-type(odd) {} a b a b a b a
1 2 3 4
a:nth-of-type(2n+1) {} a b a b a b a
* `n` is an every positive integer or zero value.
<a>
<b/>
</a> a a a
Only of Type <a>
<b/><b/> b:only-of-type {}
Selector </a>
<a> b b b a b c
<a/><b/><c/>
</a>
<a/>
<b/> b:last-of-type {} a b b
<b/>
<a>
<b/> a
<b/>
<c/>
<c/>
<d/> b b b
</a>
a :last-of-type {}
<a>
<b/> a
<b/>
<c/>
<c/>
Last of Type <d/> b b c c d
Selector </a>
<a>
<b/>
<c/> a
<b class=“x”/>
<c class=“x”/>
<b class=“x”/>
<c class=“x”/> b c b.x c.x b.x c.x
</a>
.x:last-of-type {}
<a> a
<b class=“x”/>
<c class=“x”/>
<b class=“x”/>
<c class=“x”/>
<b/> b.x c.x b.x c.x b c
<c/>
</a>
* Those items won’t be selected as no `.x` is presented
3/4 © Designed by nana jeon 2019
<a/>
a a a
Empty <a>hello</a>
a:empty {} hello
Selector <a>
<b/><b/> b b
</a>
* `empty` indicates no children elements or text.
<a/>
<b/>
<a class=“x”/> a:not(.x) {} a b a.x b.x
Negation <b class=“x”/>
Pseudo-class
Selector <a/>
<b/>
<a/> a:not(:last-of-type){} a b a a
<a/>
<a/>
<a for=“x”/>
<a for=“y”/> [for] a a[x] a[y] a[z]
Attribute <a for=“z”/>
Selector <a/>
<a for=“x”/>
<b for=“y”/> a[for] a a[x] b[y] c[z]
<c for=“z”/>
<a/>
Attribute Value <a for=“x”/>
Selector <a for=“y”/> a[for=“x”] a a[x] a[y] a[z]
<a for=“z”/>
<a for=“x”/>
Attribute Starts <a for=“xy”/>
with Selector <a for=“yz”/> [for^=“x”] [x] [xy] [yz] [zx]
<a for=“zx”/>
<a for=“x”/>
Attribute Ends <a for=“xy”/>
with Selector <a for=“yz”/> [for$=“x”] [x] [xy] [yz] [zx]
<a for=“zx”/>
<a for=“x”/>
Attribute Wildcard <a for=“xy”/>
Selector <a for=“yz”/> [for*=“x”] [x] [xy] [yz] [zx]
<a for=“zx”/>
Only Child Pseudo VS Only of Type
a a a
<a>
Only Child <b/> b:only-child {}
Pseudo </a>
Selector b b b a b c
<a>
<b/><b/>
</a>
<a>
a a a
Only of Type <a/><b/><c/>
</a> b:only-of-type {}
Selector
b b b a b c
* Happy * This cheatsheet is desinged for a quick search on CSS selectors. :)
There are so many CSS selectors with unfamiliar symbols, > . , * + ~ [ ] etc, so I am often confused with how CSS selectors work.
codesign I wish this infographic helps you find proper CSS selectors. Print this lovely cheatsheet out and stick it on the wall.
And if you need more details on CSS selectors, check out my blog at medium.com/@nana8.
today!!! I would love to hear your feedback on how I can make it better. Please leave your comments on my twitter @nanacodesign.
Thank you !!! 감사합니다!!!
4/4 © Designed by nana jeon 2019
www.nanajeon.com
twitter | @nanacodesign
medium | @nana8
linkedin | @nana8
Collaborated with Ryan Yu
the author of which is
for anyone who loves front-end and wanted to
improve their front-end skills.
www.FrontEnd30.com