css - 仅将类应用于具有特定类的最后一个元素？

Question

请参见此处的示例：

<div class="wrapper">
  <div class="group">Test</div>
  <div class="group">Test</div>
  <div class="group">Test</div>
</div>

.wrapper {

}

.group {
  position: relative;
  width: 50px;
  padding: 5px;
  margin: 5px;
  background-color: red;
  border-left: 1px solid black;
}

.wrapper > .group {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

.wrapper > .group ~ .group {
    border-top: none;
}

https://jsfiddle.net/0j984bg3/22/

我使用以下方法成功地将边框顶部仅应用于group该类的第一个元素：

.wrapper > .group {
    border-top: 1px solid black;

}

.wrapper > .group ~ .group {
    border-top: none;
}

是否有任何类似的技巧可以将 css 规则仅应用于具有特定类的最后一个元素？在我的情况下，我只想应用于该类border-bottom: 1px solid black;的最后一个元素group。

笔记：

我知道有一些解决方法，比如 last-of-type，我在组之前和之后插入其他类型的空标签之类的东西。我不想使用变通方法。我想以某种方式使用last-of-class。

标签： css