[CSS3] CSS Selector

/* for li follow by another li, add margin */  
ul li + li {
    margin-top: $unit;
  }

 

// Display
.display-flex {
  display: flex;

  &--wrap {
    flex-wrap: wrap;
  }

  &--row-gap {
    > * {
      margin: $unit !important;
    }
  }
}

 

>: direct children

 

In this case, it apply margin for 'p' and tow 'ul's

<footer
      class="mt-lg site-footer display-flex display-flex--row-gap justifycontent--center display-flex--wrap"
    >
      <p><span class="h3">✍️ NoteTaker</span><br />&copy; 2020</p>
      <ul class="list-unstyled">
        <li>
          <a href="javascript:;" class="button button--small">Pre-Order</a>
        </li>
        <li><a href="javascript:;">About</a></li>
        <li><a href="javascript:;">Contact</a></li>
        <li><a href="javascript:;">Careers</a></li>
      </ul>
      <ul class="list-unstyled">
        <li><a href="javascript:;">Terms & Conditions</a></li>
        <li><a href="javascript:;">Privacy Policy</a></li>
      </ul>
    </footer>