nth-child Tricks

by Faisal Khan Janjua

HTML

https://css-tricks.com/useful-nth-child-recipies/

<p>Select only First <span>:first-child</span></p>
<ul class="a">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<p>Select Only the Fifth Element <span>:nth-child(5)</span></p>
<ul class="b">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<p>Select All But The First Three <span>:nth-child(n+4)</span></p>
<ul class="c">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<p>Select Only First Three <span>:nth-child(-n+3)</span></p>
<ul class="d">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<p>Select every 3rd Element <span>:nth-child(3n)</span></p>
<ul class="e">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<p>Select every 3rd Element starting from first <span>:nth-child(3n+1)</span></p>
<ul class="f">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<p>Select Only Odd Elements <span>:nth-child(odd)</span></p>
<ul class="g">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<p>Select Only Even Elements <span>:nth-child(even)</span></p>
<ul class="h">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<p>Select Third Last Child <span>:nth-last-child(3)</span></p>
<ul class="i">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 ...

SCSS

p {
  margin:0;
  clear:both;
  width: 100%;
  color: #222;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 6px;
  font-family: 'Arial';
  & span {
    text-decoration: underline;
  }
}
ul {
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
  margin-bottom: 20px;
  border-bottom: 1px solid #999;
  & li {
    float: left;
    width: 20px;
    height: 20px;
    margin-right: 4px;
    margin-bottom: 4px;
    border-radius: 50%;
    border: 1px solid #999;
  }
}
ul {
  &.a li:first-child {
    background: #9F9;
  }
  &.b li:nth-child(5) {
    background: #9F9;
  }
  &.c li:nth-child(n+4) {
    background: #9F9;
  }
  &.d li:nth-child(-n+3) {
    background: #9F9;
  }
  &.e li:nth-child(3n) {
    background: #9F9;
  }
  &.f li:nth-child(3n+1) {
    background: #9F9;
  }
  &.g li:nth-child(odd) {
    background: #9F9;
  }
  &.h li:nth-child(even) {
    background: #9F9;
  }
  &.i li:nth-last-child(3) {
    background: #9F9;
  }
  &.j li:last-child {
    background: #9F9;
  }

}