Borders for sibling elements without double border or gap

Question

I had a requirement of achieving normal infinite list layout having a border around each item. I don't want 2-border look where borders of two elements meet. I tried a few approaches and stuck due to the behavior of :last-child that parent element only considers the last element as last-child.

HTML

<div class="parent">
  <div class="child">
    <span>Has proper border</span>
  </div>
  <div class="child">
    <span>Not proper border</span>
  </div>
  <p>I introduced border issue</p> <!-- Can't remove this tag -->
</div>

SCSS and CSS

span {
  display: inline-block;
  padding: 10px;
  border: 1px solid black;
}
.parent {
  margin: 15px 0;
  .child {
    &:not(:last-child) {
      span{ border-bottom-width: 0; }
    }
    // tried just to make things work. But it doesn't.
    &:last-child {
      span{ border-bottom-width: 1px; }
    }
  }
}

// Equivalent CSS - 
.parent .child:not(:last-child) span {
  border-bottom-wdth: 0;
}
.parent .child:last-child span {
  border-bottom-wdth: 1px;
}

Answer 1

I read a few articles/questions for siblings selector in CSS(1 and 2) and in SCSS(1) and applied following options to achieve the desired behaviour keeping same HTML -

1. Adjacent sibling selector ("+") approach - Working example

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

// Equivalent CSS - 
.parent .child + child span {
  border-top-width: 0;
}

2. ":last-of-type" approach -

// Same can be achieved using ":first-of-type"
.parent {
  /* :last-of-type approach */
  margin 15px 0;
  span {
    border: 1px solid black;
    border-bottom-width: 0;
  }
  .child:last-of-type {
    span {
      border-bottom-width: 1px;
    }
  }
}

// Equivalent CSS
.parent .child:last-of-type span {
  border-bottom-width: 1px;
}