CSS : 获取带有给定 class 的最后一个 HTML 标签,在列表中不是每个 HTML 标签都有这个 class

CSS : get last HTML tag with a given class, in a list where not every HTML tag has this class

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

不幸的是,在纯 css 中无法 select 具有特定 class.

的最后一个元素

不过,您的问题有很多可能的解决方案。仅举几例:

  1. 由于您可以在 HTML5 中定义自己的 tag-names,因此您可以将具有活动 class 的 button 元素重命名为 activebutton。这样您就可以使用 :last-of-type select 或定位它们。这可能与您在这里尝试的最接近。你也可以去掉底层......
  2. 您可以在 parent 中指明活动元素。在本例中是容器,并且目标是第 n 个 child.
  3. 您可以在 html
  4. 中的最后一个活动元素中添加一个额外的 class
  5. 你可以走 javascript 路线...

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

button ,
buttona,
span{
  padding: 0 50px;
  border: 0;
  height: 32px;
  font-family: 'system-ui';
  font-size: 11px;
  line-height: 32px;
  color: black;
  text-transform: uppercase;
  text-align: center;
  background: transparent;
  position: relative;
}

buttona,
span{
  background: teal;
  color: white;
}

button:after,
buttona:after,
span:after{
  content: '';
  height: 100%;
  position: absolute;
  background: red;
  right: 0;
  width: 1px;
  top: 0;
}

buttona:first-of-type,
span:first-of-type{
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}

buttona:last-of-type,
span:last-of-type{
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}

buttona:last-of-type:after,
span:last-of-type:after{
  display: none;
}
<div class="container">
  <buttona>1</buttona>
  <buttona>2</buttona>
  <button>3</button>
  <button>4</button>
  <button>5</button>
</div>

<div class="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <button>4</button>
  <button>5</button>
</div>

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

然后不需要的那个,成为第一个非活动的,在活动的之后,所以可以很容易地使用button.active + button:not(.active):after[选择=14=]

从技术上讲,这里的第一个按钮在左侧也有一个分隔线,无论如何,当片段被渲染时,分隔线会在这里被切断。但是在你需要明确“消除”它的情况下,你仍然可以在这里使用简单明了的 :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>