CSS:类的第一个和最后一个相邻 sibling

Question

我正在努力做到这一点:

具有值的元素应该有一个灰色的“丝带”。有值的元素有一个 selected 类，没有任何值的元素没有。

我的 HTML 看起来像这样:

<div class="row">
    <span>.</span>
    <span>.</span>
    <span class="selected">2</span> <!-- Should be gray & rounded (left) -->
    <span class="selected">3</span> <!-- Should be gray -->
    <span class="selected">2</span> <!-- Should be gray & rounded (right) -->
    <span>.</span>
    <span>.</span>
    <span class="selected">5</span> <!-- Should be gray & rounded (left) -->
    <span class="selected">5</span> <!-- Should be gray & rounded (right) -->
    <span>.</span>
</div>
<div class="row">
    ...
</div>

为了完成灰色丝带，我想我需要这些 CSS 规则:

1. 所有 selected 类的元素都应该有灰色背景。简单。
2. 一组具有“selected”类的相邻元素的第一个和最后一个元素应该被四舍五入。没那么容易。

据我所知，没有像:first-of-class 这样的CSS 选择器。而且，这还不够，因为多个“色带”可以存在于同一条线上。我需要像 :first-adjacent-sibling-of-class 这样的东西。

有没有什么方法可以用纯 CSS 来完成，还是我需要 JavaScript？

Answer 1

我认为这可能会有所帮助，我添加了一个 not-selected 类并定位了相邻的选定元素

.selected{
  background-color: #b7dafd;
}
span{
  float: left;
  padding: 10px;
  position: relative;
}
.not-selected+.selected{
  border-radius: 20px 0 0 20px;
  padding-left: 25px;
}
.selected+.not-selected:before{
  content: '';
  display: block;
  position: absolute;
  left:0;
  top: 0;
  height: 100%;
  border-right: 20px solid #b7dafd;
  border-radius: 0 20px 20px 0;
}

<div class="row">
    <span class="not-selected">.</span>
    <span class="not-selected">.</span>
    <span class="selected">2</span> <!-- Should be gray & rounded (left) -->
    <span class="selected">3</span> <!-- Should be gray -->
    <span class="selected">2</span> <!-- Should be gray & rounded (right) -->
    <span class="not-selected">.</span>
    <span class="not-selected">.</span>
    <span class="selected">5</span> <!-- Should be gray & rounded (left) -->
    <span class="selected">5</span> <!-- Should be gray & rounded (right) -->
    <span class="not-selected">.</span>
    <span class="not-selected">.</span>
    <span class="not-selected">.</span>
    <span class="selected">2</span> <!-- Should be gray & rounded (left) -->
    <span class="selected">3</span> <!-- Should be gray -->
    <span class="selected">2</span> <!-- Should be gray & rounded (right) -->
    <span class="not-selected">.</span>
    <span class="not-selected">.</span>
    <span class="not-selected">.</span>
    <span class="selected">5</span> <!-- Should be gray & rounded (left) -->
    <span class="selected">5</span> <!-- Should be gray & rounded (right) -->
    <span class="not-selected">.</span>
    <span class="not-selected">.</span>
    <span class="not-selected">.</span>
</div>