Professional Documents
Culture Documents
Css Sheet
Css Sheet
Css Sheet
selectors
cheatsheet
#>.,*+~:[](){}
by nana jeon
Feb 2019
<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
<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 `b` 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
2n+1
<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”/>
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
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
www.FrontEnd30.com