Skip to content

Instantly share code, notes, and snippets.

@git2358

git2358/css-selectors-cheatsheet.markdown

Created May 10, 2019 00:34
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save git2358/27f0e1d50ec52bf79a519d509637464c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save git2358/27f0e1d50ec52bf79a519d509637464c to your computer and use it in GitHub Desktop.
Download ZIP
CSS selectors cheatsheet
Raw
css-selectors-cheatsheet.markdown
Raw
index.html
<!-- FAB -->
<div class="fab-outer">
<a class="fab" role="button" target="_black" href="https://frontend30.com/css-selectors-cheatsheet/"> <span>play &nbsp 🕹</span></a>
<a class="fab" role="button" target="_black" href="https://www.dropbox.com/home/CSS%20selectors%20cheatsheet?preview=CSS+selectors+cheatsheet.pdf"></span>download 👇</span></a>
<a class="fab" role="button" target="_black" href="https://medium.com/p/9593bc204e3f"> </span>read &nbsp 📖</span></a>
<a class="fab fe30" role="button" href="https://frontend30.com/">
<span class="fe30-yellow">&#60;</span>
<span>FrontEnd30</span>
<span class="fe30-yellow">&#47;&#62;</span>
</a>
</div>
<!-- FAB close-->
<div class="content-outer">
<div class="title-outer">
<div class="title">
<h1>CSS</h1>
<h2>selectors</h2>
<h2>cheatsheet</h2>
<div class="symbol"> # > . , * + ~ : { } ( ) [ ] </div>
</div>
<div class="copyright-outer">
<div class="text-medium copyright">Designed & built by <a target="_black" href="http://nanajeon.com">nana</a>
</div>
<div class="text-medium copyright">Collaborated with <a target="_black" href="https://ryanyu.com/">Ryan Yu</a>
</div>
</div>
<!-- copyright-outer close-->
</div>
<!-- title-outer close-->
<!-- Type selector -->
<div class="content">
<p><strong>Type</strong> Selector: <strong>a</strong> { }</p>
<div class="circle-outer">
<div class="circle selected">
<div>a</div>
</div>
<div class="circle">
<div>b</div>
</div>
<div class="circle">
<div>c</div>
</div>
</div>
</div>
<!-- Type selector close-->
<div class="border"></div>
<!-- ID selector -->
<div class="content">
<p><strong>ID</strong> Selector: <strong>#a</strong> { }</p>
<div class="circle-outer">
<div class="circle selected">
<div>#a</div>
</div>
<div class="circle">
<div>#b</div>
</div>
<div class="circle">
<div>#c</div>
</div>
</div>
<p class="text-medium">* <strong>ID</strong> is not recommended as a selector</p>
</div>
<!-- ID selector close -->
<div class="border"></div>
<!-- Child selector -->
<div class="content">
<p><strong>Child</strong> Selector: <strong>a > b</strong> { }</p>
<div> <!-- Level 2 + 4 circle -->
<div class="level1"> <!-- Level 1 -->
<div class="circle-outer">
<div class="circle level-parent1">
<div>a</div>
</div>
</div>
<div class="bar">
<div class="level-parent1-bar-center"></div>
<div class="level-parent1-bar-horizontal"></div>
<div class="level-parent1-bar1"></div>
<div class="level-parent1-bar2"></div>
</div>
<div class="circle-outer">
<div class="circle selected">
<div>b</div>
</div>
<div class="circle levelCircle">
<div>c</div>
</div>
</div>
</div> <!-- level 1 close-->
<div class="flex-row">
<div class="leve2-1"> <!-- level 2-1-->
<div class="bar">
<div class="circle2-bar-center"></div>
<div class="circle2-bar-horizontal"></div>
<div class="circle2-bar1"></div>
<div class="circle2-bar2"></div>
</div>
<div class="circle-outer">
<div class="circle">
<div>a</div>
</div>
<div class="circle">
<div>b</div>
</div>
</div>
</div> <!-- level 2-1 close-->
<div class="leve2-2">
<div class="bar"> <!-- level 2-2-->
<div class="circle2-bar-center"></div>
<div class="circle2-bar-horizontal"></div>
<div class="circle2-bar1"></div>
<div class="circle2-bar2"></div>
</div>
<div class="circle-outer">
<div class="circle">
<div>a</div>
</div>
<div class="circle">
<div>b</div>
</div>
</div>
</div> <!-- level 2-2 close-->
</div> <!-- level 2 close-->
</div> <!-- 2 Level + 4circle close -->
</div>
<!-- Child selector close -->
<div class="border"></div>
<!-- Descendant selector -->
<div class="content">
<p><strong>Descendant</strong> Selector: <strong>a b</strong> { }</p>
<div> <!-- Level 2 + 4 circle -->
<div class="level1"> <!-- Level 1 -->
<div class="circle-outer">
<div class="circle level-parent1">
<div>a</div>
</div>
</div>
<div class="bar">
<div class="level-parent1-bar-center"></div>
<div class="level-parent1-bar-horizontal"></div>
<div class="level-parent1-bar1"></div>
<div class="level-parent1-bar2"></div>
</div>
<div class="circle-outer">
<div class="circle selected">
<div>b</div>
</div>
<div class="circle levelCircle">
<div>c</div>
</div>
</div>
</div> <!-- level 1 close-->
<div class="flex-row">
<div class="leve2-1"> <!-- level 2-1-->
<div class="bar">
<div class="circle2-bar-center"></div>
<div class="circle2-bar-horizontal"></div>
<div class="circle2-bar1"></div>
<div class="circle2-bar2"></div>
</div>
<div class="circle-outer">
<div class="circle">
<div>a</div>
</div>
<div class="circle selected">
<div>b</div>
</div>
</div>
</div> <!-- level 2-1 close-->
<div class="leve2-2">
<div class="bar"> <!-- level 2-2-->
<div class="circle2-bar-center"></div>
<div class="circle2-bar-horizontal"></div>
<div class="circle2-bar1"></div>
<div class="circle2-bar2"></div>
</div>
<div class="circle-outer">
<div class="circle">
<div>a</div>
</div>
<div class="circle selected">
<div>b</div>
</div>
</div>
</div> <!-- level 2-2 close-->
</div> <!-- level 2 close-->
</div> <!-- 2 Level + 4circle close -->
</div>
<!-- Descendant selector close -->
<div class="border"></div>
<!-- Combine Descendant & ID selector -->
<div class="content">
<p><strong>Combine Descendant & ID</strong> Selector: <strong>#a b</strong> { }</p>
<div> <!-- Level 2 + 4 circle -->
<div class="level1"> <!-- Level 1 -->
<div class="circle-outer">
<div class="circle level-parent1">
<div>#a</div>
</div>
</div>
<div class="bar">
<div class="level-parent1-bar-center"></div>
<div class="level-parent1-bar-horizontal"></div>
<div class="level-parent1-bar1"></div>
<div class="level-parent1-bar2"></div>
</div>
<div class="circle-outer">
<div class="circle selected">
<div>b</div>
</div>
<div class="circle levelCircle">
<div>c</div>
</div>
</div>
</div> <!-- level 1 close-->
<div class="flex-row">
<div class="leve2-1"> <!-- level 2-1-->
<div class="bar">
<div class="circle2-bar-center"></div>
<div class="circle2-bar-horizontal"></div>
<div class="circle2-bar1"></div>
<div class="circle2-bar2"></div>
</div>
<div class="circle-outer">
<div class="circle">
<div>a</div>
</div>
<div class="circle selected">
<div>b</div>
</div>
</div>
</div> <!-- level 2-1 close-->
<div class="leve2-2">
<div class="bar"> <!-- level 2-2-->
<div class="circle2-bar-center"></div>
<div class="circle2-bar-horizontal"></div>
<div class="circle2-bar1"></div>
<div class="circle2-bar2"></div>
</div>
<div class="circle-outer">
<div class="circle">
<div>a</div>
</div>
<div class="circle selected">
<div>b</div>
</div>
</div>
</div> <!-- level 2-2 close-->
</div> <!-- level 2 close-->
</div> <!-- 2 Level + 4circle close -->
</div>
<!-- Descendant selector close -->
<div class="border"></div>
<!-- Class selector -->
<div class="content">
<p><strong>Class</strong> Selector: <strong>.a</strong> { }</p>
<div class="circle-outer">
<div class="circle selected">
<div>.a</div>
</div>
<div class="circle">
<div>.b</div>
</div>
<div class="circle">
<div>.c</div>
</div>
</div>
</div>
<!-- Type selector close-->
<div class="border"></div>
<!-- Combine the Class selector -->
<div class="content">
<p><strong>Combine the Class</strong> Selector: <strong>b.x</strong> { }</p>
<div class="circle-outer">
<div class="circle">
<div>a.x</div>
</div>
<div class="circle selected">
<div>b.x</div>
</div>
<div class="circle">
<div>c.x</div>
</div>
</div>
</div>
<!-- Combine the Class selector close-->
<div class="border"></div>
<!-- Comma Combinator selector -->
<div class="content">
<p><strong>Comma Combinator</strong> Selector: <strong>a, c</strong> { }</p>
<div class="circle-outer">
<div class="circle selected">
<div>a</div>
</div>
<div class="circle">
<div>b</div>
</div>
<div class="circle selected">
<div>c</div>
</div>
<div class="circle">
<div>d</div>
</div>
</div>
</div>
<!-- Comma Combinator selector close-->
<div class="border"></div>
<!-- Universal selector -->
<div class="content">
<p><strong>Universal</strong> Selector: <strong>*</strong> { }</p>
<div class="circle-outer">
<div class="circle selected">
<div>a</div>
</div>
<div class="circle selected">
<div>b</div>
</div>
<div class="circle selected">
<div>c</div>
</div>
<div class="circle selected">
<div>d</div>
</div>
</div>
</div>
<!-- Universal selector close-->
<div class="border"></div>
<!-- Combine Universal selector -->
<div class="content">
<p><strong>Combine Universal</strong> Selector: <strong>a *</strong> { }</p>
<div> <!-- Level 2 + 4 circle -->
<div class="level1"> <!-- Level 1 -->
<div class="circle-outer">
<div class="circle level-parent1">
<div>a</div>
</div>
</div>
<div class="bar">
<div class="level-parent1-bar-center"></div>
<div class="level-parent1-bar-horizontal"></div>
<div class="level-parent1-bar1"></div>
<div class="level-parent1-bar2"></div>
</div>
<div class="circle-outer">
<div class="circle selected">
<div>b</div>
</div>
<div class="circle levelCircle selected">
<div>c</div>
</div>
</div>
</div> <!-- level 1 close-->
<div class="flex-row">
<div class="leve2-1"> <!-- level 2-1-->
<div class="bar">
<div class="circle2-bar-center"></div>
<div class="circle2-bar-horizontal"></div>
<div class="circle2-bar1"></div>
<div class="circle2-bar2"></div>
</div>
<div class="circle-outer">
<div class="circle selected">
<div>a</div>
</div>
<div class="circle selected">
<div>b</div>
</div>
</div>
</div> <!-- level 2-1 close-->
<div class="leve2-2">
<div class="bar"> <!-- level 2-2-->
<div class="circle2-bar-center"></div>
<div class="circle2-bar-horizontal"></div>
<div class="circle2-bar1"></div>
<div class="circle2-bar2"></div>
</div>
<div class="circle-outer">
<div class="circle selected">
<div>a</div>
</div>
<div class="circle selected">
<div>b</div>
</div>
</div>
</div> <!-- level 2-2 close-->
</div> <!-- level 2 close-->
</div> <!-- 2 Level + 4circle close -->
</div>
<!-- Combine Universal close -->
<div class="border"></div>
<!-- Adjacent Sibling selector -->
<div class="content">
<p><strong>Adjacent Sibling</strong> Selector: <strong>a + b</strong> { }</p>
<div class="circle-outer">
<div class="circle">
<div>a</div>
</div>
<div class="circle selected">
<div>b</div>
</div>
<div class="circle">
<div>b</div>
</div>
<div class="circle">
<div>b</div>
</div>
</div>
</div>
<!-- Adjacent Sibling selector close-->
<div class="border"></div>
<!-- General Sibling selector -->
<div class="content">
<p><strong>General Sibling</strong> Selector: <strong>a ~ b</strong> { }</p>
<div class="circle-outer">
<div class="circle">
<div>a</div>
</div>
<div class="circle selected">
<div>b</div>
</div>
<div class="circle selected">
<div>b</div>
</div>
<div class="circle">
<div>c</div>
</div>
<div class="circle selected">
<div>b</div>
</div>
</div>
</div>
<!-- General Sibling selector close-->
<div class="border"></div>
<!-- First Child Pseudo selector -->
<div class="content">
<p><strong>First Child Pseudo</strong> Selector: <strong>b:first-child</strong> { }</p>
<div class="circle-outer ">
<div class="circle selected">
<div>b</div>
</div>
<div class="circle">
<div>b</div>
</div>
<div class="circle">
<div>b</div>
</div>
</div>
<p class="or">or</p>
<div class="circle-outer">
<div class="circle">
<div>a</div>
</div>
<div class="circle">
<div>b</div>
</div>
<div class="circle">
<div>b</div>
</div>
</div>
<p class="text-small firstChildPseudo">first-child</p>
<p class="text-medium">* In the second diagram, <strong>first-child</strong> is <strong>'a'</strong> element, not <strong>'b'</strong> element. So there is nothing to be selected</p>
</div>
<!-- First Child Pseudo selector close-->
<div class="border"></div>
<!-- Only Child Pseudo selector -->
<div class="content">
<p><strong>Only Child Pseudo </strong> Selector:
<p><strong>b:first-child</strong> { } or</p>
<p><strong>a :only-child</strong> { }</p>
<div class="flex-row">
<!-- 1circle -->
<div>
<div class="circle-outer">
<div class="circle circle1-parent">
<div>a</div>
</div>
</div>
<div class="bar">
<div class="circle1-bar-center"></div>
</div>
<div class="circle-outer">
<div class="circle selected">
<div>b</div>
</div>
</div>
</div>
<!-- 1circle close-->
<!-- 2circle -->
<div>
<div class="circle-outer">
<div class="circle circle2-parent">
<div>a</div>
</div>
</div>
<div class="bar">
<div class="circle2-bar-center"></div>
<div class="circle2-bar-horizontal"></div>
<div class="circle2-bar1"></div>
<div class="circle2-bar2"></div>
</div>
<div class="circle-outer">
<div class="circle">
<div>a</div>
</div>
<div class="circle">
<div>b</div>
</div>
</div>
</div>
<!-- 2circle close -->
<!-- 3circle -->
<div>
<div class="circle-outer">
<div class="circle circle3-parent">
<div>a</div>
</div>
</div>
<div class="bar">
<div class="circle3-bar-center"></div>
<div class="circle3-bar1"></div>
<div class="circle3-bar2"></div>
<div class="circle3-bar-horizontal"></div>
</div>
<div class="circle-outer">
<div class="circle">
<div>a</div>
</div>
<div class="circle">
<div>b</div>
</div>
<div class="circle">
<div>c</div>
</div>
</div>
</div>
<!-- 3circle close-->
</div> <!-- diagram-outer close-->
</div>
<!-- Only Child Pseudo selector close-->
<div class="border"></div>
<!-- Last Child Pseudo selector -->
<div class="content">
<p><strong>Last Child Pseudo</strong> Selector: <strong>b:last-child</strong> { }</p>
<div class="circle-outer">
<div class="circle">
<div>b</div>
</div>
<div class="circle">
<div>b</div>
</div>
<div class="circle selected">
<div>b</div>
</div>
</div>
<p class="or">or</p>
<div class="circle-outer">
<div class="circle">
<div>b</div>
</div>
<div class="circle">
<div>b</div>
</div>
<div class="circle">
<div>c</div>
</div>
</div>
<p class="text-medium">* In the second diagram, <strong>last-child</strong> is <strong>'c'</strong> element, not <strong>'b'</strong> element. So there is nothing to be selected.</p>
</div>
<!-- Last Child Pseudo selector close-->
<div class="border"></div>
<!-- Nth Child Pseudo selector -->
<div class="content">
<p><strong>Nth Child Pseudo</strong> Selector:</p>
<br>
<p> <strong>b:nth-child(2)</strong> { }</p>
<!-- circle with number -->
<div class="number">
<p class="text-small">1</p>
<p class="text-small">2</p>
<p class="text-small">3</p>
</div>
<div class="circle-outer">
<div class="circle">
<div>b</div>
</div>
<div class="circle selected">
<div>b</div>
</div>
<div class="circle">
<div>b</div>
</div>
</div>
<p class="or">or</p>
<div class="number">
<p class="text-small">1</p>
<p class="text-small">2</p>
<p class="text-small">3</p>
</div>
<div class="circle-outer">
<div class="circle">
<div>a</div>
</div>
<div class="circle selected">
<div>b</div>
</div>
<div class="circle">
<div>b</div>
</div>
</div>
<p class="or">or</p>
<div class="number">
<p class="text-small">1</p>
<p class="text-small">2</p>
<p class="text-small">3</p>
</div>
<div class="circle-outer">
<div class="circle">
<div>b</div>
</div>
<div class="circle">
<div>a</div>
</div>
<div class="circle">
<div>b</div>
</div>
</div>
<!-- circle with number close-->
<p class="text-medium">* In the third diagram, <strong>nth-child(2)</strong> is <strong>'a'</strong> element, not <strong>'b'</strong> element. So there is nothing to be selected.</p>
<br>
<p> <strong>a :nth-child(2)</strong> { }</p>
<!-- 3circle -->
<div>
<div class="circle-outer">
<div class="circle circle3-parent">
<div>a</div>
</div>
</div>
<div class="bar">
<div class="circle3-bar-center"></div>
<div class="circle3-bar1"></div>
<div class="circle3-bar2"></div>
<div class="circle3-bar-horizontal"></div>
</div>
<div class="circle-outer">
<div class="circle">
<div>a</div>
</div>
<div class="circle selected">
<div>b</div>
</div>
<div class="circle">
<div>c</div>
</div>
</div>
</div>
<!-- 3circle close-->
</div>
<!-- Nth Child Pseudo selector close -->
<div class="border"></div>
<!-- Nth Last Child selector -->
<div class="content">
<p><strong>Nth Last Child</strong> Selector:</p>
<br>
<p><strong>a :nth-last-child(2)</strong> { } or</p>
<p><strong>c:nth-last-child(2)</strong> { }</p>
<!-- 4circle -->
<div>
<div class="circle-outer">
<div class="circle circle4-parent">
<div>a</div>
</div>
</div>
<div class="bar">
<div class="circle4-bar-center"></div>
<div class="circle4-bar-horizontal"></div>
<div class="circle4-bar1"></div>
<div class="circle4-bar2"></div>
<div class="circle4-bar3"></div>
<div class="circle4-bar4"></div>
</div>
<div class="circle-outer">
<div class="circle">
<div>a</div>
</div>
<div class="circle">
<div>b</div>
</div>
<div class="circle selected">
<div>c</div>
</div>
<div class="circle">
<div>d</div>
</div>
</div>
</div>
<!-- 4circle close -->
<!-- numbers -->
<div class="number">
<p class="text-small">4</p>
<p class="text-small">3</p>
<p class="text-small">2</p>
<p class="text-small">1</p>
</div>
<!-- numbers close -->
<br><br><br>
<p><strong>a:nth-last-child(2)</strong> { } or</p>
<p><strong>b:nth-last-child(2)</strong> { } or</p>
<p><strong>d:nth-last-child(2)</strong> { }</p>
<!-- 4circle -->
<div>
<div class="circle-outer">
<div class="circle circle4-parent">
<div>a</div>
</div>
</div>
<div class="bar">
<div class="circle4-bar-center"></div>
<div class="circle4-bar-horizontal"></div>
<div class="circle4-bar1"></div>
<div class="circle4-bar2"></div>
<div class="circle4-bar3"></div>
<div class="circle4-bar4"></div>
</div>
<div class="circle-outer">
<div class="circle">
<div>a</div>
</div>
<div class="circle">
<div>b</div>
</div>
<div class="circle">
<div>c</div>
</div>
<div class="circle">
<div>d</div>
</div>
</div>
</div>
<!-- 4circle close -->
<!-- numbers -->
<div class="number">
<p class="text-small">4</p>
<p class="text-small">3</p>
<p class="text-small">2</p>
<p class="text-small">1</p>
</div>
<!-- numbers close -->
<p class="text-medium">* In this diagram, <strong>nth-last-child(2)</strong> is <strong>'c'</strong> element, not <strong>'b'</strong> element. So there is nothing to be selected.</p>
</div>
<!-- Nth Last Child selector close-->
<div class="border"></div>
<!-- First of Type selector -->
<div class="content">
<p><strong>First of Type</strong> Selector: <strong>b:first-of-type</strong> { }</p>
<div class="circle-outer">
<div class="circle">
<div>a</div>
</div>
<div class="circle selected">
<div>b</div>
</div>
<div class="circle">
<div>a</div>
</div>
<div class="circle">
<div>b</div>
</div>
</div>
</div>
<!-- First of Type selector close-->
<div class="border"></div>
<!-- Nth of Type selector -->
<div class="content">
<p><strong>Nth Child Pseudo</strong> Selector:</p>
<br>
<p> <strong>b:nth-child(2)</strong> { }</p>
<!-- circle with number -->
<div class="number">
<p class="text-small">1</p>
<p class="text-small invisible">0</p>
<p class="text-small">2</p>
<p class="text-small invisible">0</p>
<p class="text-small">3</p>
</div>
<div class="circle-outer">
<div class="circle">
<div>a</div>
</div>
<div class="circle">
<div>b</div>
</div>
<div class="circle selected">
<div>a</div>
</div>
<div class="circle">
<div>b</div>
</div>
<div class="circle">
<div>a</div>
</div>
</div>
<!-- circle with number close-->
<br><br>
<p> <strong>a:nth-of-type(even)</strong> { }</p>
<!-- circle with number -->
<div class="number">
<p class="text-small">1</p>
<p class="text-small invisible">0</p>
<p class="text-small">2</p>
<p class="text-small invisible">0</p>
<p class="text-small">3</p>
<p class="text-small invisible">0</p>
<p class="text-small">4</p>
</div>
<div class="circle-outer">
<div class="circle">
<div>a</div>
</div>
<div class="circle">
<div>b</div>
</div>
<div class="circle selected">
<div>a</div>
</div>
<div class="circle">
<div>b</div>
</div>
<div class="circle">
<div>a</div>
</div>
<div class="circle">
<div>b</div>
</div>
<div class="circle selected">
<div>a</div>
</div>
</div>
<!-- circle with number close-->
<br><br>
<p> <strong>a:nth-of-type(odd)</strong> { }</p>
<!-- circle with number -->
<div class="number">
<p class="text-small">1</p>
<p class="text-small invisible">0</p>
<p class="text-small">2</p>
<p class="text-small invisible">0</p>
<p class="text-small">3</p>
<p class="text-small invisible">0</p>
<p class="text-small">4</p>
</div>
<div class="circle-outer">
<div class="circle selected">
<div>a</div>
</div>
<div class="circle">
<div>b</div>
</div>
<div class="circle">
<div>a</div>
</div>
<div class="circle">
<div>b</div>
</div>
<div class="circle selected">
<div>a</div>
</div>
<div class="circle">
<div>b</div>
</div>
<div class="circle">
<div>a</div>
</div>
</div>
<!-- circle with number close-->
<br><br>
<p> <strong>a:nth-of-type(2n+1)</strong> { }</p>
<!-- circle with number -->
<div class="number">
<p class="text-small">1</p>
<p class="text-small invisible">0</p>
<p class="text-small">2</p>
<p class="text-small invisible">0</p>
<p class="text-small">3</p>
<p class="text-small invisible">0</p>
<p class="text-small">4</p>
</div>
<div class="circle-outer">
<div class="circle">
<div>a</div>
</div>
<div class="circle">
<div>b</div>
</div>
<div class="circle">
<div>a</div>
</div>
<div class="circle">
<div>b</div>
</div>
<div class="circle selected">
<div>a</div>
</div>
<div class="circle">
<div>b</div>
</div>
<div class="circle">
<div>a</div>
</div>
</div>
<!-- circle with number close-->
<div class="number">
<p class="text-small nth-of-type">2n+1</p>
</div>
</div>
<!-- Nth of Type selector close -->
<div class="border"></div>
<!-- Only of Type selector -->
<div class="content">
<p><strong>Only of Type </strong> Selector: <strong>b:only-of-type</strong> { }</p>
<div class="flex-row">
<!-- 1circle -->
<div>
<div class="circle-outer">
<div class="circle circle1-parent">
<div>a</div>
</div>
</div>
<div class="bar">
<div class="circle1-bar-center"></div>
</div>
<div class="circle-outer">
<div class="circle selected">
<div>b</div>
</div>
</div>
</div>
<!-- 1circle close-->
<!-- 2circle -->
<div>
<div class="circle-outer">
<div class="circle circle2-parent">
<div>a</div>
</div>
</div>
<div class="bar">
<div class="circle2-bar-center"></div>
<div class="circle2-bar-horizontal"></div>
<div class="circle2-bar1"></div>
<div class="circle2-bar2"></div>
</div>
<div class="circle-outer">
<div class="circle">
<div>b</div>
</div>
<div class="circle">
<div>b</div>
</div>
</div>
</div>
<!-- 2circle close -->
<!-- 3circle -->
<div>
<div class="circle-outer">
<div class="circle circle3-parent">
<div>a</div>
</div>
</div>
<div class="bar">
<div class="circle3-bar-center"></div>
<div class="circle3-bar1"></div>
<div class="circle3-bar2"></div>
<div class="circle3-bar-horizontal"></div>
</div>
<div class="circle-outer">
<div class="circle">
<div>a</div>
</div>
<div class="circle selected">
<div>b</div>
</div>
<div class="circle">
<div>c</div>
</div>
</div>
</div>
<!-- 3circle close-->
</div> <!-- diagram-outer close-->
</div>
<!-- Only of Type selector close -->
<div class="border"></div>
<!-- Last of Type selector -->
<div class="content">
<p><strong>Last of Type</strong> Selector: </p>
<br>
<p><strong>b:last-of-type</strong> { }</p>
<div class="circle-outer">
<div class="circle">
<div>a</div>
</div>
<div class="circle">
<div>b</div>
</div>
<div class="circle selected">
<div>b</div>
</div>
</div>
<br>
<br>
<br>
<p><strong>a :last-of-type</strong> { }</p>
<!-- 3circle -->
<div>
<div class="circle-outer">
<div class="circle circle3-parent">
<div>a</div>
</div>
</div>
<div class="bar">
<div class="circle3-bar-center"></div>
<div class="circle3-bar1"></div>
<div class="circle3-bar2"></div>
<div class="circle3-bar-horizontal"></div>
</div>
<div class="circle-outer">
<div class="circle">
<div>b</div>
</div>
<div class="circle">
<div>b</div>
</div>
<div class="circle selected">
<div>b</div>
</div>
</div>
</div>
<!-- 3circle close-->
<p class="or">or</p>
<!-- 5circle -->
<div>
<div class="circle-outer">
<div class="circle circle5-parent">
<div>a</div>
</div>
</div>
<div class="bar">
<div class="circle5-bar-center"></div>
<div class="circle5-bar-horizontal"></div>
<div class="circle5-bar1"></div>
<div class="circle5-bar2"></div>
<div class="circle5-bar3"></div>
<div class="circle5-bar4"></div>
<div class="circle5-bar5"></div>
</div>
<div class="circle-outer">
<div class="circle">
<div>b</div>
</div>
<div class="circle selected">
<div>b</div>
</div>
<div class="circle">
<div>c</div>
</div>
<div class="circle selected">
<div>c</div>
</div>
<div class="circle selected">
<div>d</div>
</div>
</div>
</div>
<!-- 5circle close -->
<br><br><br>
<p><strong>.x :last-of-type</strong> { }</p>
<!-- 6 circle -->
<div>
<div class="circle-outer">
<div class="circle circle6-parent">
<div>a</div>
</div>
</div>
<div class="bar">
<div class="circle6-bar-center"></div>
<div class="circle6-bar-horizontal"></div>
<div class="circle6-bar1"></div>
<div class="circle6-bar2"></div>
<div class="circle6-bar3"></div>
<div class="circle6-bar4"></div>
<div class="circle6-bar5"></div>
<div class="circle6-bar6"></div>
</div>
<div class="circle-outer">
<div class="circle">
<div>b</div>
</div>
<div class="circle">
<div>c</div>
</div>
<div class="circle">
<div>b.x</div>
</div>
<div class="circle">
<div>c.x</div>
</div>
<div class="circle selected">
<div>b.x</div>
</div>
<div class="circle selected">
<div>c.x</div>
</div>
</div>
</div>
<!-- 6 circle close -->
<p class="or">or</p>
<!-- 6 circle -->
<div>
<div class="circle-outer">
<div class="circle circle6-parent">
<div>a</div>
</div>
</div>
<div class="bar">
<div class="circle6-bar-center"></div>
<div class="circle6-bar-horizontal"></div>
<div class="circle6-bar1"></div>
<div class="circle6-bar2"></div>
<div class="circle6-bar3"></div>
<div class="circle6-bar4"></div>
<div class="circle6-bar5"></div>
<div class="circle6-bar6"></div>
</div>
<div class="circle-outer">
<div class="circle">
<div>b.x</div>
</div>
<div class="circle">
<div>c.x</div>
</div>
<div class="circle">
<div>b.x</div>
</div>
<div class="circle">
<div>c.x</div>
</div>
<div class="circle">
<div>b</div>
</div>
<div class="circle">
<div>c</div>
</div>
</div>
</div>
<!-- 6 circle close -->
<!-- arrow -->
<div class="arrow-outer">
<div class="arrow flex-row">
<div class="arrow1"></div>
<div class="arrow2"></div>
</div>
<div class="bar">
<div class="arrow-bar-center"></div>
<div class="arrow-bar-horizontal"></div>
<div class="arrow-bar1"></div>
<div class="arrow-bar2"></div>
</div>
</div>
<!-- arrow close -->
<p class="text-medium">* Those items won’t be selected as no <strong>.x</strong> is presented</p>
</div>
<!-- Last of Type selector close -->
<div class="border"></div>
<!-- Empty selector -->
<div class="content">
<p><strong>Empty</strong> Selector: <strong>a:empty</strong> { }</p>
<!-- infographic outer -->
<div class="circle-outer">
<div class="circle selected marginRight">
<div>a</div>
</div>
<div class="circle marginRight">
<div>a</div>
</div>
<!-- 2circle -->
<div>
<div class="circle-outer">
<div class="circle circle2-parent">
<div>a</div>
</div>
</div>
<div class="bar">
<div class="circle2-bar-center"></div>
<div class="circle2-bar-horizontal"></div>
<div class="circle2-bar1"></div>
<div class="circle2-bar2"></div>
</div>
<div class="circle-outer">
<div class="circle">
<div>b</div>
</div>
<div class="circle">
<div>b</div>
</div>
</div>
</div>
<!-- 2circle close -->
<p class="text-small hello">hello</p>
</div>
<!-- infographic outer close-->
<p class="text-medium">* No children elements or text.</p>
</div>
<!-- Empty selector close -->
<div class="border"></div>
<!-- Negation Pseudo-class selector -->
<div class="content">
<p><strong>Negation Pseudo-class</strong> Selector:</p>
<br><br>
<p><strong>a:not(.x)</strong> { }</p>
<div class="circle-outer">
<div class="circle selected">
<div>a</div>
</div>
<div class="circle">
<div>b</div>
</div>
<div class="circle">
<div>a.x</div>
</div>
<div class="circle">
<div>b.x</div>
</div>
</div>
<br><br>
<p><strong>a:not(:last-of-type)</strong> { }</p>
<div class="circle-outer">
<div class="circle selected">
<div>a</div>
</div>
<div class="circle">
<div>b</div>
</div>
<div class="circle selected">
<div>a</div>
</div>
<div class="circle">
<div>a</div>
</div>
</div>
</div>
<!-- Negation Pseudo-class selector close -->
<div class="border"></div>
<!-- Attribute selector -->
<div class="content">
<p><strong>Attribute</strong> Selector:</p>
<br>
<p><strong>[for]</strong> { }</p>
<div class="circle-outer condensed">
<div class="circle">
<div>a</div>
</div>
<div class="circle selected">
<div>a[x]</div>
</div>
<div class="circle selected">
<div>a[y]</div>
</div>
<div class="circle selected">
<div>a[z]</div>
</div>
</div>
<br><br>
<p><strong>a[for]</strong> { }</p>
<div class="circle-outer condensed">
<div class="circle">
<div>a</div>
</div>
<div class="circle selected">
<div>a[x]</div>
</div>
<div class="circle">
<div>b[y]</div>
</div>
<div class="circle">
<div>c[z]</div>
</div>
</div>
</div>
<!-- Attribute selector close -->
<div class="border"></div>
<!-- Attribute Value selector -->
<div class="content">
<p><strong>Attribute Value</strong> Selector: <strong>a[for=“x”]</strong> { }</p>
<div class="circle-outer condensed">
<div class="circle">
<div>a</div>
</div>
<div class="circle selected">
<div>a[x]</div>
</div>
<div class="circle">
<div>a[y]</div>
</div>
<div class="circle">
<div>a[z]</div>
</div>
</div>
</div>
<!-- Attribute Value selector close -->
<div class="border"></div>
<!-- Attribute Starts selector -->
<div class="content">
<p><strong>Attribute Starts</strong> Selector: <strong>[for^=“x”]</strong> { }</p>
<div class="circle-outer condensed">
<div class="circle selected">
<div>[x]</div>
</div>
<div class="circle selected">
<div>[xy]</div>
</div>
<div class="circle">
<div>[yz]</div>
</div>
<div class="circle">
<div>[zx]</div>
</div>
</div>
</div>
<!-- Attribute Starts selector close -->
<div class="border"></div>
<!-- Attribute Ends selector -->
<div class="content">
<p><strong>Attribute Ends</strong> Selector: <strong>[for$=“x”]</strong> { }</p>
<div class="circle-outer condensed">
<div class="circle selected">
<div>[x]</div>
</div>
<div class="circle">
<div>[xy]</div>
</div>
<div class="circle">
<div>[yz]</div>
</div>
<div class="circle selected">
<div>[zx]</div>
</div>
</div>
</div>
<!-- Attribute Ends selector close -->
<div class="border"></div>
<!-- Attribute Wildcard selector -->
<div class="content">
<p><strong>Attribute Wildcard</strong> Selector: <strong>[for*=“x”]</strong> { }</p>
<div class="circle-outer condensed">
<div class="circle selected">
<div>[x]</div>
</div>
<div class="circle selected">
<div>[xy]</div>
</div>
<div class="circle">
<div>[yz]</div>
</div>
<div class="circle selected">
<div>[zx]</div>
</div>
</div>
</div>
<!-- Attribute Wildcard selector close -->
<br>
<div class="footer">
<h2>* the end *</h2>
<div>
<p class="doTheMagic">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.
I wish this infographic helps you find proper CSS selectors.
Print this PDF out and stick it on the wall.
And if you need more details on CSS selectors, check out links below;</p>
</div>
<!-- button -->
<div class="button">
<a class="c-btn" href="" target="_black">Go 🕹</a>
<a class="c-btn" href="https://medium.com/p/9593bc204e3f/" target="_black">📖 more</a>
<a class="c-btn" href="https://www.dropbox.com/home/CSS%20selectors%20cheatsheet?preview=CSS+selectors+cheatsheet.pdf" target="_black">☕️ cheatsheet download</a>
</div>
<h2>* Happy codesign today! *</h2>
</div>
</div>
Raw
style.scss
// Global
$color: (
primary: #bbd85f,
primary-dark: #869F3A,
primary-light: #FFF9B1,
grey: #666,
white: #fff,
yellow: #ffae02,
yellow-dark: #ff8212
);
@function color($color-name) {
@return map-get($color, $color-name)
}
body {
background-color: color(primary);
margin: 0;
font-family: roboto mono;
}
//FAB
.fab-outer {
position: absolute;
position: fixed;
top: 20px;
left: 0;
float: left;
}
.fab {
color: color(grey);
width: 120px;
text-align: right;
margin: 10px 0;
//btn reset
font-size: 18px;
text-decoration: none;
padding: 8px 16px;
border-radius: 0px 4px 4px 0px;
background-color: color(white);
transition: all 0.3s ease-in-out;
display: block;
//position
position: relative;
left: -103px;
transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
&:hover {
transform: translatex(103px);
}
}
.fe30 {
font-size: 18px;
width: 180px;
left: -163px;
transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
&::after {
display: none;
background-color: none;
content:"";
}
&:hover {
transform: translatex(163px);
&::after {
position: absolute;
left: 50px;
top: 50px;
display: block;
z-index: 1;
}
}
}
.fe30-yellow {
color: color(yellow);
}
//FAB close
.content-outer {
width: 600px;
border: 2px solid color(white);
margin: 20px auto;
}
// typographic
h1 {
font-size: 40px;
font-weight: 600;
line-height: 50px;
margin: 0;
}
h2 {
font-size: 25px;
font-weight: 500;
line-height: 38px;
margin: 0;
}
p {
color: color(grey);
font-size: 16px;
font-weight: 300;
line-height: 20px;
}
.text-small {
font-family: roboto;
font-size: 11px;
font-weight: 700;
position: relative;
}
.text-medium {
font-size: 13px;
font-weight: 400;
}
.condensed {
font-family: Roboto Condensed;
}
.or {
font-size: 13px;
font-weight: 400;
position: relative;
left: 50px;
}
.invisible {
opacity: 0;
}
/// title
.title-outer {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-content: flex-end;
align-items: flex-end;
}
.title {
display: flex;
color: white;
padding: 20px 0 20px 20px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.copyright-outer {
color: color(white);
padding: 0 20px 20px 0;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
align-content: stretch;
align-items: flex-end;
}
.copyright {
a {
font-weight: 700;
//btn reset
text-decoration: none;
padding: 2px 6px;
border-radius: 4px;
color: white;
transition: all 0.3s ease-in-out;
&:hover {
color: color(grey);
}
}
margin: 10px 0 0 0;
}
.symbol {
color: color(grey);
font-family: roboto;
font-size: 17px;
font-weight: 400;
width: 150px;
}
//
.content {
padding: 30px 20px;
background-color: color(white);
}
.border {
background-color: color(primary);
height: 1px;
width: 100%;
}
// text location
.firstChildPseudo {
left: -6px;
top: -10px;
}
.nth-of-type {
left: 155px;
}
.circle-outer {
display: flex;
flex-direction: row;
}
.circle {
border: 1px solid color(grey);
color: color(grey);
font-size: 14px;
font-weight: 500;
margin: 0 5px;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.selected {
background-color: color(primary);
}
.circle3-parent {
position: relative;
left: 40px;
}
.bar {
position: relative;
}
//circle //
// circle with number
.number {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: flex-start;
p {
margin: 0 17.2px;
}
}
// circle 1
.circle1-bar-center{
width: 0px;
height: 21px;
border: 0.5px solid color(grey);
position: relative;
left: 20px;
}
// circle 2
.circle2-parent {
position: relative;
left: 21px;
}
.circle2-bar-center{
width: 0px;
height: 9px;
border: 0.5px solid color(grey);
position: relative;
left: 41px;
}
.circle2-bar-horizontal {
width: 41px;
height: 0px;
border: 0.5px solid color(grey);
position: relative;
left: 20px;
}
.circle2-bar1 {
width: 0px;
height: 10px;
border: 0.5px solid #666;
position: relative;
left: 20px;
top: -1px;
}
.circle2-bar2 {
width: 0px;
height: 10px;
border: 0.5px solid #666;
position: absolute;
left: 61px;
top: 11px;
}
// circle 3
.circle3-bar-center{
width: 0px;
height: 21px;
border: 0.5px solid #666;
position: relative;
left: 60px;
}
.circle3-bar1 {
width: 0px;
height: 11px;
border: 0.5px solid #666;
position: absolute;
left: 20px;
top: 10px;
}
.circle3-bar2 {
width: 0px;
height: 11px;
border: 0.5px solid #666;
position: absolute;
left: 102px;
top: 10px;
}
.circle3-bar-horizontal {
width: 82px;
height: 0px;
border: 0.5px solid #666;
position: absolute;
left: 20px;
top: 10px;
}
// circle 4
.circle4-parent {
position: relative;
left: 60px;
}
.circle4-bar-center{
width: 0px;
height: 10px;
border: 0.5px solid #666;
position: relative;
left: 80px;
}
.circle4-bar1 {
width: 0px;
height: 12px;
border: 0.5px solid #666;
position: relative;
left: 20px;
top: -1px;
}
.circle4-bar2 {
width: 0px;
height: 14px;
border: 0.5px solid #666;
position: absolute;
left: 61px;
top: 11px;
}
.circle4-bar3 {
width: 0px;
height: 14px;
border: 0.5px solid #666;
position: absolute;
left: 102px;
top: 11px;
}
.circle4-bar4 {
width: 0px;
height: 14px;
border: 0.5px solid #666;
position: absolute;
left: 142px;
top: 11px;
}
.circle4-bar-horizontal {
width: 122px;
height: 0px;
border: 0.5px solid #666;
position: relative;
left: 20px;
}
// circle 5
.circle5-parent {
position: relative;
left: 83px;
}
.circle5-bar-center{
width: 0px;
height: 10px;
border: 0.5px solid #666;
position: relative;
left: 102px;
}
.circle5-bar1 {
width: 0px;
height: 12px;
border: 0.5px solid #666;
position: relative;
left: 20px;
top: -1px;
}
.circle5-bar2 {
width: 0px;
height: 14px;
border: 0.5px solid #666;
position: absolute;
left: 61px;
top: 11px;
}
.circle5-bar3 {
width: 0px;
height: 14px;
border: 0.5px solid #666;
position: absolute;
left: 102px;
top: 11px;
}
.circle5-bar4 {
width: 0px;
height: 14px;
border: 0.5px solid #666;
position: absolute;
left: 142px;
top: 11px;
}
.circle5-bar5 {
width: 0px;
height: 14px;
border: 0.5px solid #666;
position: absolute;
left: 182px;
top: 11px;
}
.circle5-bar-horizontal {
width: 162px;
height: 0px;
border: 0.5px solid #666;
position: relative;
left: 20px;
}
// circle 6
.circle6-parent {
position: relative;
left: 103px;
}
.circle6-bar-center{
width: 0px;
height: 10px;
border: 0.5px solid #666;
position: relative;
left: 122px;
}
.circle6-bar1 {
width: 0px;
height: 12px;
border: 0.5px solid #666;
position: relative;
left: 20px;
top: -1px;
}
.circle6-bar2 {
width: 0px;
height: 14px;
border: 0.5px solid #666;
position: absolute;
left: 61px;
top: 11px;
}
.circle6-bar3 {
width: 0px;
height: 14px;
border: 0.5px solid #666;
position: absolute;
left: 102px;
top: 11px;
}
.circle6-bar4 {
width: 0px;
height: 14px;
border: 0.5px solid #666;
position: absolute;
left: 142px;
top: 11px;
}
.circle6-bar5 {
width: 0px;
height: 14px;
border: 0.5px solid #666;
position: absolute;
left: 182px;
top: 11px;
}
.circle6-bar6 {
width: 0px;
height: 14px;
border: 0.5px solid #666;
position: absolute;
left: 225px;
top: 11px;
}
.circle6-bar-horizontal {
width: 204px;
height: 0px;
border: 0.5px solid #666;
position: relative;
left: 20px;
}
// 2 Level + 4circle
// Level 1
.level-parent1 {
position: relative;
left: 40px;
}
.level-parent1-bar-center{
width: 0px;
height: 10px;
border: 0.5px solid #666;
position: relative;
left: 60px;
}
.level-parent1-bar-horizontal {
width: 80px;
height: 0px;
border: 0.5px solid #666;
position: relative;
left: 20px;
}
.level-parent1-bar1 {
width: 0px;
height: 12px;
border: 0.5px solid #666;
position: relative;
left: 20px;
top: -1px;
}
.level-parent1-bar2 {
width: 0px;
height: 14px;
border: 0.5px solid #666;
position: absolute;
left: 100px;
top: 11px;
}
.levelCircle {
margin: 0 45px;
}
.level1 {
position: relative;
left: 21px;
}
.flex-row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: flex-start;
}
//arrow
.arrow-outer {
position: relative;
left: 165px;
margin-top: 5px;
}
.arrow1 {
width: 0;
height: 0;
border-right: 6px solid transparent ;
border-bottom: 8px solid #666; //Coloured border
border-left: 6px solid transparent;
position: relative;
left: 15px;
}
.arrow2 {
width: 0;
height: 0;
border-right: 6px solid transparent ;
border-bottom: 8px solid #666; //Coloured border
border-left: 6px solid transparent;
position: relative;
left: 43px;
}
.arrow-bar-center{
width: 0px;
height: 10px;
border: 0.5px solid #666;
position: relative;
left: 41px;
top: 10px;
}
.arrow-bar-horizontal {
width: 41px;
height: 0px;
border: 0.5px solid #666;
position: relative;
left: 20px;
}
.arrow-bar1 {
width: 0px;
height: 10px;
border: 0.5px solid #666;
position: absolute;
left: 20px;
top: 0px;
}
.arrow-bar2 {
width: 0px;
height: 10px;
border: 0.5px solid #666;
position: absolute;
left: 61px;
top: 0px;
}
// etc
.marginRight {
margin-right: 30px;
}
.hello {
position: relative;
left: -142px;
top: 19px;
}
.doTheMagic {
color: white;
font-family: roboto;
font-weight: 400;
line-height: 30px;
width: 550px;
}
//toggle
.toggleWrapper {
background-color: color(primary);
// position: absolute;
// top: 50%;
// left: 50%;
// overflow: hidden;
// padding: 0 200px;
// transform: translate3d(-50%, -50%, 0);
// input {
// position: absolute;
// left: -99em;
// }
}
.toggle {
cursor: pointer;
display: inline-block;
position: relative;
width: 100px;
height: 54px;
background-color: color(primary-dark);
border: 1px solid color(grey);
border-radius: 90px - 6;
transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
&:before {
content: '🕹game';
position: absolute;
left: -100px;
top: 11px;
font-size: 20px;
font-weight: 700;
color: color(white);
}
&:after {
content: '📖reading';
position: absolute;
right: -120px;
top: 12px;
font-size: 20px;
font-weight: 700;
color: color(primary-dark);
}
}
.btn {
display: inline-block;
position: relative;
z-index: 1;
top: 4px;
left: 6px;
width: 50px - 6;
height: 50px - 6;
background-color: color(white);
border: 1px solid color(grey);
border-radius: 50px;
box-shadow: 0 2px 6px rgba(0,0,0,.3);
transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transform: rotate(-45deg);
}
input:checked {
+ .toggle {
background-color: color(primary-dark);
&:before {
color: color(primary-dark);
}
&:after {
color: color(yellow);
// text-shadow: -1px 0 color(grey), 0 1px color(grey), 1px 0 color(grey), 0 -1px color(grey);
}
.btn {
background-color: color(yellow);
transform: translate3d(44px, 0, 0) rotate(0);
.crater { opacity: 1; }
}
}
}
//button default style
.c-btn {
text-decoration: none;
padding: 2px 12px;
border: 1px solid white;
border-radius: 4px;
color: white;
transition: all 0.3s ease-in-out;
&:hover {
background-color: color(primary-dark);
}
}
.button {
margin: 40px 0;
}
//footer
.footer {
background-color: color(primary);
color: white;
padding: 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment