JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<h1>Remove adjacent border bottom with :has selector</h1>
<ul>
  <li class="list-item">Item number 1</li>
  <li class="list-item">Item number 2</li>
  <li class="list-item expanded">Item number 3</li>
  <li class="list-item">Item number 4</li>
</ul>

CSS

:root {
  --default-border: 1px solid dodgerblue;
}
ul {
  list-style-type: none;
}
.list-item  {
  padding: 1rem 2.6rem;
  border-bottom: var(--default-border);
}

.expanded {
  border: var(--default-border);
  border-radius: 8px;
  padding-bottom: 5rem;
  font-weight: bold;

}

.list-item:has(+ .expanded) {
  border-bottom: none;
}