Link to sectionExample

by adelura

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors -->

<input type="text" />

<div class="wrapper">
  <div class="wrapper__inner --pre-special">Head</div>
  <div class="wrapper__inner --special" tabindex="0">Prev</div>
  <div class="wrapper__inner --pre-special">
    <div class="wrapper wrapper--only-bottom-line">
      <div class="wrapper__inner">1</div>
      <div class="wrapper__inner">2</div>
      <div class="wrapper__inner">3</div>
    </div>
    
  </div>
  <div class="wrapper__inner --special" tabindex="0">Next</div>
</div>

SCSS

$main-border: 1px solid blue;

.wrapper {
  background: lightblue;
}

.wrapper--only-bottom-line {
  & .wrapper__inner {
    border-right: none;
    border-left: none;
    
    &:last-of-type {
      border-bottom: none;
    }
  }
}

.wrapper__inner {
  border-right: $main-border;
  border-left: $main-border;
  border-bottom: $main-border;
}

:not(.wrapper--only-bottom-line) > .wrapper__inner:first-of-type {
  border-top: $main-border;
}

:not(.wrapper--only-bottom-line) > .wrapper__inner:last-of-type {
  border-bottom: $main-border;
}

.wrapper__inner.--pre-special {
  border-bottom: none;
}

.wrapper__inner.--special {
  border: $main-border;
  
  &:focus {
    border: 1px solid red;
    outline: 5px solid black;
  }
}