Nesting

<div class="outer">
  <div class="inner">
    <p>Without CSS Nesting</p>
  </div>
</div>

.outer {
  background-color: coral;
  padding: 20px;
}

.outer .inner {
  background-color: teal;
  padding: 20px;
}

.outer .inner p {
  color: black;
  background-color: cadetblue;
  padding: 10px;
  text-align: center;
  font-size: 2rem;
}

.outer .inner p:hover {
  color: white;
  background-color: purple;
}

<div class="outer">
  <div class="inner">
    <p>With CSS Nesting</p>
  </div>
</div>

.outer {
  background-color: coral;
  padding: 20px;

  & .inner {
    background-color: teal;
    padding: 20px;

    & p {
      color: black;
      background-color: cadetblue;
      padding: 10px;
      text-align: center;
      font-size:2rem;

      &:hover {
        color: white;
        background-color: purple;
      }
    }
  }
}