Skip to content

CSS: Last of specific class, not child of parent

As per discussion in Stackoverflow, at the moment CSS's last-of-type selector is the best way to access last element, but apparently that does not apply to class, but the element.

And even so, when trying to create A | B | C NOT, this does not work.

<div>
  <span class="separated">A</span>
  <span class="separated">B</span>
  <span class="separated">C</span>
  <span class="not">NOT</span>
</div>

It produces separators like this: A | B | C | NOT, entering an unwanted pipe between C and NOT, even when replacing spans with custom elements, say, my-separator-element, and trying to my-separator-element:last-of-type.

Thus, the way to work around this is as follows:

<div>
  <span>
    <span class="separated">A</span>
    <span class="separated">B</span>
    <span class="separated">C</span>
  </span>
  <span class="not">NOT</span>
</div>