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

Question

THIS IS A DUPLICATE OF MY CLOSED QUESTION, BUT THE DUPLICATES ARE IRRELEVANT
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" is entirely something else.
Third "duplicate" is the explanation of why my try didn't work.
Fourth "duplicate" gives a workaround for the first element, not the last.
I have understood that there is no CSS selector for that, I juste want a solution. Be mindful of that before closing my question !
I have 5 buttons. They have an underlayer that make them seem they are active, as you will see in the snippet.
Each button can have an active state, but only starting from 1, and ending anywhere to 5.
They all have a divider, displayed in red in the snippet.
I would like to keep the divider into the underlayer, outside of the underlayer, but I would like to make it disappear at the end of the underlayer (in snippet, after button #2).
Following my first question, I understood that there is no CSS selector to do that. So what would be the best way to tackle this issue ?
.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

In this particular case: Just put the divider on the left side of the buttons, instead of the right?
Then the one that doesn’t need one, becomes the first non-active one after the active ones, so it can easily be selected using button.active + button:not(.active):after
The first button here technically has a divider to the left as well then, that gets cut off here when the snippet gets rendered anyway. But in a situation where you’d need to explicitly “eliminate” it, you could still go with just plain and simple :first-child here (I’m assuming if there’s active buttons, it always starts with the first one, right?)
This is a bit similar to what Hao suggested in their answer, but with their version, the divider gets placed on the right on some buttons, on the left on others … I’d prefer to simply have it the same on all.
.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

Unfortunately, in pure css there is no way to select the last element with a specific class.
There are loads of possible solutions to your issue however. To name a few:
Since you can define your own tag-names in HTML5, you can rename the button elements with the active class to activebutton. That way you can target them with the :last-of-type selector. This might be the closest to what you are trying here. You could get rid of the underlayer as well...
You could indicate the active element in it's parent. In this case the container, and target the nth child.
You could add an extra class to the last active element in your html
You could go the javascript route...
.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>