jcubic jcubic - 3 months ago 13
CSS Question

How to select last element that don't have specific class?

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

It's not possible in CSS as the :last-child specifically looks at the last child. Use jQuery in this case :not(.class_name):last.

That would do it!

$('li:not(.hidden):last button').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>

Comments