0

I'm trying to devise a CSS selector that will select the last sibling in a parent container that does not have a particular class. In this example, I would want the button labeled "Two" to have red text.

.hidden {
    display:none;
}

button:not(.hidden):last-of-type {
    color:red;
}
<div>
<button>One</button>
<button>Two</button>
<button class="hidden">Three</button>
</div>

The way it works in this example, however, is that, to be selected, a button must be the last button in the list, AND it must not have the hidden class.

I want to select the last button that does not have the hidden class.

Is there a way I can accomplish this?

Dave 114
  • 183
  • 2
  • 2
  • 12
  • 1
    The `type` in `last-of-type` refers to the [document language element type](https://w3c.github.io/csswg-drafts/selectors/#type-selector) (i.e. the tag name, not any class/attribute/etc specifiers). The usual recommendations are to add an extra class to the last (non-hidden) button ... or remove the `.hidden` button from the DOM altogether (the classic magician's trick when invisibility is too hard). – motto Apr 14 '23 at 15:59

0 Answers0