Select last element without a class [duplicate]

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?

Answer 1

Per this answer, the solution is to use 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.

It's now widely supported in all major browsers.