Select last element without a class

Question

I'm dynamically adding and removing classes to and from elements on specific JS events. What I would like to do is select the last child element that has none these classes with CSS.

Example #1

<container-element>
  <h2></h2>
  <div class='some-class'></div>
  <div></div>
  <div></div> <!-- select this div -->
</container-element>

Example #2

<container-element>
  <h2></h2>
  <div></div>
  <div></div> <!-- select this div -->
  <div class='some-class'></div>
</container-element>

Is it possible to write a CSS selector to do this?

Something like container-element > div:not(.select):last-of-type?

@fstanis im not trying to select the last element WITH a class. im trying to select the last element WITHOUT a class. — oldboy, May 26 '19 at 00:22
Well, unfortunately, since the linked "last child with a specific class" is impossible in pure CSS, the same goes for this. — fstanis, May 26 '19 at 00:23
Specifically, I believe the workarounds presented in the other question apply here as well. — fstanis, May 26 '19 at 00:25
@fstanis isnt it possible using some sort of attribute selector like `[class~='list']:last-of-type`? — oldboy, May 26 '19 at 00:29
Check the discussion in that other answer - there's a lot of useful information on how that works and I believe it wouldn't work in your case. — fstanis, May 26 '19 at 00:36
Are there any other targetable features in your HTML? Total number of siblings? Element types? — Michael Benjamin, May 26 '19 at 00:54
as you said *adding and removing classes to and from elements on specific JS events.* --> so I am pretty sure you can handle this with JS — Temani Afif, May 26 '19 at 01:11
@TemaniAfif i def can, but as we talked about before: better to use CSS if possible — oldboy, May 26 '19 at 03:37
@TemaniAfif found a way to do it with pure HTML and CSS that is pretty darn simple. im gon post my answer below — oldboy, May 26 '19 at 03:55

score 2 · Answer 1 · answered May 26 '19 at 00:35

2

Per this answer, the solution would technically be container-element > div:nth-last-child(1 of :not(.select)).

However, this of S clause in :nth-last-child is still not supported by any browser other than Safari.

answered May 26 '19 at 00:35

fstanis

5,234
1
23
42

thats an old answer tho. `nth-last-child` is def the right approach. ill be back later when the raptors game is over – oldboy May 26 '19 at 00:39
How is `nth-last-child` the right approach? Still +1 to this answer because I learned about `of S`. Thanks. – Michael Benjamin May 26 '19 at 00:59
@Michael_B cuz it traverses upwards/backwards thru the document – oldboy May 26 '19 at 03:36
No it doesn't. It just selects the last child it finds on the way down. – Michael Benjamin May 26 '19 at 03:50

Michael Benjamin · Answer 2 · 2019-05-26T01:01:29.050

1

You're saying: select the last sibling that doesn't contain a class attribute.

I don't believe it's possible with currently available CSS.

You're asking a waterfall (the cascade) to run upward. The browser needs to check the last element, then check the ones that came before it. This is not how CSS works.

div:not(.some-class):last-of-type won't work because the browser doesn't move up automatically to the next sibling.

edited May 26 '19 at 01:01

answered May 26 '19 at 00:52

Michael Benjamin

346,931
104
581
701

theres `nth-last-child` now tho – oldboy May 26 '19 at 03:35
so there are initially 4 children, which turns into 3, once you select one of them from the dropdown since the child header is removed – oldboy May 26 '19 at 03:38
i can achieve something like this with pure CSS and HTML, but id have to assign an arbitrary class to the other elements. `div:not([class*=[not-selected])` or even `div:not([class~=[not-selected])` – oldboy May 26 '19 at 03:51
Yes. If you have that option, then the solution is easy. – Michael Benjamin May 26 '19 at 03:52
yeah thats what im gon do – oldboy May 26 '19 at 03:56

oldboy · Answer 3 · 2019-05-27T08:49:04.367

Of course I can do this with JS, but preferred a pure CSS solution. Supposedly a pure CSS solution is not possible, so the next best thing is an CSS solution with a little extra HTML.

The trick was to add a class, not-selected, to all of the elements, then remove this class from the element that you want to target with the CSS selector.

And the CSS selector would be div:not([class*='not-selected']).

div:not([class*='not-selected']) {
  background: red;
}

<button type='button'>
  <h2>title</h2>
  <div class='not-selected'>option one</div>
  <div>option two</div>
  <div class='not-selected'>option three</div>
</button>

Select last element without a class

3 Answers3