css last-child with :not selector

Question

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 1

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

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>