How to select last element that don't have specific class? [duplicate] - html

Question

This question already has answers here:
Combining :last-child with :not(.class) selector in CSS
(2 answers)
Closed 6 years ago.
How can I select last li that doesn't have the .hidden class?
I have HTML and CSS like this:
ul li:last-child:not(:first-child):not(.hidden) button {
background-color: red;
}
<ul>
<li>
<button>1</button>
</li>
<li>
<button>2</button>
</li>
<li class="hidden">
<button>3</button>
</li>
</ul>

Answer 1

At the current moment, there is no CSS way of being able to find an element that is then followed by another specific element.
Possibly soon, there will be the CSS Relational Pseudo-class :has() which will make what you want possible. This is currently in the CSS Selectors Level 4 Draft and looks unlikely to be rolled out across any browsers any time soon.
A demo is below but don't expect it to work until the Selectors 4 Draft is at least in Working Draft.
Keep an eye on CanIUse to see when it becomes readily available.
ul li:has(+ .hidden:last-child),
ul li:last-child:not(.hidden) {
background: red;
}
<ul>
<li>
<button>1</button>
</li>
<li>
<button>2</button>
</li>
<li class="hidden">
<button>3</button>
</li>
</ul>
:has() is available in jQuery though, so here's a jQuery alternative
Read more here from the Official jQuery Docs
$('ul li:has(+ .hidden:last-child), ul li:not(.hidden):last-child').css('background', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<button>1</button>
</li>
<li>
<button>2</button>
</li>
<li class="hidden">
<button>3</button>
</li>
</ul>

Answer 2

The CSS :nth and :last-child pseudo selectors can only work with tags and not other selectors like :not or class but if there is always going to be only one .hidden li at the end, then you could use something like this:
li:nth-last-child(2) { background: lightblue; }
<ul>
<li>1</li>
<li>2</li>
<li class="hidden">3 hidden</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="hidden">4 hidden</li>
</ul>