CSS：类的第一个和最后一个相邻兄弟

我正在努力做到这一点：

具有值的元素应具有灰色的“ribbon”。有值的元素有一个类

被选中

，没有任何值的元素则没有

我的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>

.
.
2.
3.
2.
.
.
5.
5.
.
...

要完成灰色功能区，我想我需要以下CSS规则：

选择了类

的所有元素应具有灰色背景。简单

类为“selected”的一组相邻元素的第一个和最后一个元素应四舍五入。不那么容易

据我所知，没有像

:first of class

这样的CSS选择器。但这仍然不够，因为同一条线上可能存在多个“色带”。我需要类似于

：类的第一个相邻兄弟姐妹

有没有办法用纯CSS实现这一点，或者我需要JavaScript？
我想这可能会有所帮助，我添加了一个
未选中的
类，并针对相邻的选中元素


。已选定{
背景色：#b7dafd；
}
跨度{
浮动：左；
填充：10px；
位置：相对位置；
}
.未选择+.已选择{
边界半径：20px 0 0 20px；
左侧填充：25px；
}
.已选择+.未选择：之前{
内容：''；
显示：块；
位置：绝对位置；
左：0；
排名：0；
身高：100%；
右边框：20px实心#b7dafd；
边界半径：0 20px 20px 0；
}

.
.
2.
3.
2.
.
.
5.
5.
.
.
.
2.
3.
2.
.
.
.
5.
5.
.
.
.

选择的每个
。都是一个圆


所有
.selected ~
第一个
的同级
。selected
具有负边距，左侧位于
边界半径：0


紧跟在
：not（.selected）+
后面的所有
.selected
都是一个左边框为正的圆


所有
：未（.selected）
跟随
。selected+
的左边距为正


行不会断开，除非您特别使用标记



演示

.row{
空白：nowrap；
}
.选定{
背景：灰色；
高度：4ex；
宽度：4cm；
边界半径：50%；
显示：内联块；
利润率：0-4倍；
线高：2；
文本对齐：居中；
}
.已选定~.已选定{
边际：0-12px；
边框左上半径：0；
边框左下半径：0；
}
*：未选择（.selected）+已选择{
边界左上半径：50%；
边界左下半径：50%；
利润率：0-12px 0 12px
}
.已选+*：未选（已选）{
边际：0 12像素
}

.
.
2.
3.
2.
.
.
5.
5.
.
.
.
2.
3.
.
2.
.
5.
5.
.
2.
2.
2.
.
.
.
5.
5.
5.
5
我认为这将是解决您的问题的最佳方案

由于我使用了样式
span.selected+span.selected:before本身，因此您的选择是安全的，不会中断到下一行

试试这个，告诉我还有什么。干杯


div{
显示：内联块
}
跨度{
显示：内联块；
浮动：左；
填充：15px；
位置：相对位置；
/*排名：0*/
利润率：10px0；
}
span.selected{
背景：灰色；
边界半径：50%；
}
span.已选+span.已选：之前{
内容：''；
身高：100%；
宽度：40px；
位置：绝对位置；
背景：灰色；
排名：0；
左：-20px；
z指数：-1；
}
span.已选+span.未选{
边界半径：50%；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
您可以找到其previos同级没有此类的elemet with类：
：not（.selected）+.selected
，反之亦然。您需要共享一些代码，我们才能尝试帮助您。一个复制你的结构的例子或东西。T是对的，我们需要知道有多少家长，哪些孩子属于哪些家长，标签也可能是一件重要的事情，你应该知道2k+已经需要代码了，好吧，抱歉，我认为这是不言自明的，但你是对的。我调整了方向盘question@fikkatra最好使用jQuery。但是如果你想要纯CSS，我可以建议你一个解决方案。但要做到这一点，你必须重新排列你的价值观，使之颠倒。这是一项伟大的工作，但很遗憾地说。如果我们以响应的方式使用它。这将不是解决方案-因为
选择的最后一条曲线是使用
.selected+。未选择：在
之前，所以样式是在
之前。未选择：在
之前，所以如果该元素转到小屏幕上的下一行，那么曲线将位于下一行，而不是
选择的
。是@JithinRajPR但是我们可以通过将整行包装在一个div中来轻松处理这个场景。处理这个场景比为这些小需求添加一个全新的库要好得多，最终他们会通过DOM操作来完成。我们可以通过更改一些方法来避免它，请检查我的答案，还有一件事<代码>将整行换行到div中
是不可取的，如果有几种方法作为解决方案。TY我们有几种方法可以解决这个问题，您的解决方案就是其中之一。顺便说一句，很好的解决方法。谢谢。欢迎光临。只是分享了我的想法而已。只是想指出问题，不是针对个人的。我已经支持了你的答案，但还是投了赞成票。干得好。