:not() pseudo class

:not() pseudo usage

by Sanjay

HTML

<ul class="first-method">
  <li>first</li>
  <li class="active">second</li>
  <li>third</li>
  <li>forth</li>
</ul>

<ul class="second-method">
  <li>first</li>
  <li class="active">second</li>
  <li>third</li>
  <li>forth</li>
</ul>

SCSS

.first-method {
    li {
        color: red;
        &.active {
            color: black;   /* we are overriding red color by black. */
        }
    }
}

.second-method li:not(.active) {
    color: red;             /* we are just making <li> red which don't have "active" class. */
}