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> 

Answer 2

You can select the last ul tag in jQuery, check if it is disabled and apply your styling if appropriate as follows:

if(!$('ul').last().hasClass('disabled')){
    $('ul').last().css('border-right', '1px solid black');
}