CSS : get last HTML tag with a given class, 在一个列表中，不是每个 HTML 标签都有这个类

Question

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

First "duplicate"

It does not look at the class though, only the type, so if you happen to have non-articles with the same class you'll get unexpected results

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

在这种特殊情况下:只需将分隔线放在按钮的左侧，而不是右侧？

然后不需要的那个，成为第一个非事件的，在事件的之后，所以它可以很容易地使用 button.active + button:not( .active):之后

从技术上讲，这里的第一个按钮在左侧也有一个分隔线，无论如何，当片段被渲染时，分隔线会在这里被切断。但是在你需要明确“消除”它的情况下，你仍然可以在这里使用简单明了的 :first-child (我假设如果有事件按钮，它总是开始与第一个，对吧？)

这有点类似于 Hao 在他们的回答中所建议的，但是在他们的版本中，分隔线被放置在一些按钮的右侧，其他按钮的左侧……我更愿意简单地将它放在所有按钮上.

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

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

button.active + button:not(.active):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>