Css last-child with: not selector

Question

I have a dynamic ul.column number, and some of them have a disabled class. For example:

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

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

I 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 is always applied to the last element, regardless of the selector :not(.disabled) . Is there any other way to stylize the latter. column , which also does not have a .disabled class?

I use jQuery perfectly, but I don’t know how to achieve what I want.

Answer 1

This is not possible with css selectors only. However, you can use jQuery.

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 style, if necessary, as follows:

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