Tutorials

Natours version – 5 – 1 : Sass-Nasting

Natours version – 5 – 2 : Architecture

Natours version – 5 – 3 : Layout & Grid System – video

Natours version – 5 – 3 : Layout & Grid System – Pre-built grid system

Problem Set

Prob-set

Blog

1. :not():

HTML

<ul class="nav">
  <li class="nav__item">Home</li>
  <li class="nav__item">About</li>
  <li class="nav__item">Services</li>
  <li class="nav__item">Contact</li>
</ul>

SCSS

.nav__item:not(:last-child) {
  margin-right: 20px;
}

:not(:last-child) applies margin-right: 20px to all .nav__item elements except the last one (Contact).

Without the not() it will simply select the last child , however without that not(), we select everything but last child()

2.The clearfix hack does not append an actual element after the floated element. Instead, it uses the ::after pseudo-element to insert an invisible element that clears the float. This prevents parent elements from collapsing when their child elements are floated.

HTML

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
</div>

SCSS

clearfix{
    &:after{
        content: "";
        display: table;
        clear: both;
        }
    }