CSS: получить последний HTML-тег с данным классом в списке, где не каждый HTML-тег имеет этот класс

Question

это дубликат моего закрытый вопрос , но дубликаты не имеют отношения

первый "дубликат"

Тем не менее, он не смотрит на класс, а только на тип, поэтому, если у вас не будет статей с тем же классом, вы получите неожиданные результаты

Second "дубликат " это совсем другое.

Третий «дубликат» - это объяснение того, почему моя попытка не сработала.

Четвертый «дубликат» дает обходной путь для первого элемента, а не последнего.

Я понял, что для этого не существует селектора 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):after

Первая техническая кнопка здесь также имеет разделитель слева, который обрезается здесь, когда рендерит фрагменттак или иначе. Но в ситуации, когда вам необходимо явно «устранить» ее, вы все равно можете использовать просто и просто :first-child (я предполагаю, что если есть активные кнопки, они всегда начинаются с первой, верно?)

Это немного похоже на то, что Хао предложил в своем ответе, но с их версией делитель помещается справа на некоторых кнопках, слева на других… Я бы предпочел просто иметь егоодинаково для всех.

.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>

Answer 2

К сожалению, в чистом CSS нет способа выбрать последний элемент с определенным классом.

Однако существует множество возможных решений вашей проблемы. Чтобы назвать несколько:

1. Поскольку вы можете определять свои собственные имена тегов в HTML5, вы можете переименовать элементы button с активным классом в activebutton. Таким образом, вы можете выбрать их с помощью селектора :last-of-type. Это может быть ближе всего к тому, что вы пытаетесь здесь. Вы также можете избавиться от подслоя ...
2. Вы можете указать активный элемент в его родительском элементе. В этом случае контейнер и цель n-го потомка.
3. Вы можете добавить дополнительный класс к последнему активному элементу в вашем html
4. Вы можете пойти по маршруту 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>