SCSS

by Sujit Kumar Singh

HTML

<div class="parent">
  <div class="child">
    <span>Has proper border, sibling</span>
  </div>
  <div class="child">
    <span>Has proper border, sibling</span>
  </div>
  <div class="child">
    <span>Has proper border, sibling</span>
  </div>
  <p>Things are looking good, even though I am present.</p>
</div>

SCSS

body {
  background: #fff;
  padding: 0 10px;
  font-family: Helvetica;
}
span {
  display: inline-block;
  padding: 10px;
  border: 1px solid black;
}

.parent {
  /* siblings approach */
  margin: 15px 0;
  $className: child;
  .#{ $className } {
    & + .#{ $className } {
      span {
        border-top-width: 0;
      }
    }
  }
}