CSS：在没有每个HTML标记都具有此类的列表中，获取具有给定类的最后一个HTML标记

Question

[[这是我的CLOSED QUESTION的重复项，但重复项无关紧要

First "duplicate"

虽然它不只查看类，而仅查看类型，所以如果您碰巧遇到非同一类的文章，则会得到意想不到的结果

Second "duplicate"完全是另外一回事。

Third "duplicate"解释了为什么我的尝试不起作用。

Fourth "duplicate"提供第一个元素而不是最后一个元素的解决方法。

我已经知道没有CSS选择器，我只想找到一个解决方案。在结束我的问题之前要注意这一点！

---

我有5个按钮。如下面的代码片段所示，它们具有一个使它们看起来很活跃的底层。

每个按钮可以处于活动状态，但是只能从1开始，到5为止都结束。

它们都有一个分隔符，在摘要中以红色显示。

我想将分隔线保留在底层之外的底层中，但是我希望使其在底层的末尾消失（在片段中，在按钮＃2之后）。

第一个问题之后，我了解到没有CSS选择器可以做到这一点。那么解决这个问题的最佳方法是什么？

.container {
  display: flex;
  align-items: stretch;
  justify-content: start
  margin: 12px;
  position: relative;
}

button:after {
  content: '';
  height: 100%;
  position: absolute;
  background: red;
  left: calc(100% + 12px);
  width: 1px;
  top: 0;
}

button.active:last-child:after {
  content: none;
}

button {
  flex: 0 0 calc(20% - 24px);
  border: 0;
  height: 32px;
  color: black;
  text-transform: uppercase;
  text-align: center;
  margin-right: 24px;
  background: transparent;
  position: relative;
}

button.active {
  color: white;
}

.active-pill {
  background: teal;
  position: absolute;
  height: 32px;
  border-radius: 16px;
  background: teal;
  width: calc(40% - 12px);
  z-index: -1;
}

<div class="container">

  <div class="active-pill"></div>
  
  <button class="active">Step 1</button>
  <button class="active">Step 2</button>
  <button>Step 3</button>
  <button>Step 4</button>
  <button>Step 5</button>
</div>

<h3>
  Which selector to use to remove the content after button #2 ?
</h3>

Answer 1

不幸的是，在纯CSS中，无法选择具有特定类的最后一个元素。