vlrprbttst vlrprbttst - 6 months ago 10
HTML Question

css last-child with :not selector

I have a dynamic number of

ul.column
and some of these have the
disabled
class. For example:

<ul class="column"></ul>
<ul class="column"></ul>
<ul class="column disabled"></ul>


I don't know how many I can have, but I want to apply a
border-right
to the last
.column
which doesn't also have the
.disabled
class.

I've tried something like:

ul:not(.disabled):last-child {border-right:1px solid black}


and

ul:last-child:not(.disabled) {border-right:1px solid black}


but the style always applies to the last element, regardless of the
:not(.disabled)
selector. Is there another way to style the last .
column
that doesn't also have the
.disabled
class?

I'm fine using jQuery, but I don't know how achieve what I want.

Answer

This isn't possible with just css selectors. You could use jQuery though.

$('ul:not(.disabled):last').css('border-right', '1px solid black');

Demo

$('ul:not(.disabled):last').css('border-right', '1px solid black');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="column">
  <li>test</li>
</ul>
<ul class="column">
  <li>test</li>
</ul>
<ul class="column disabled">
  <li>test</li>
</ul>

Comments