javascript - css last-child with :not selector - Stack Overflow

admin管理员组

文章数量:1399499

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.

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.

• javascript
• jquery
• html
• css
• css-selectors

Share Improve this question Follow edited May 13, 2016 at 12:30 Chris 59.6k2020 gold badges120120 silver badges142142 bronze badges asked May 13, 2016 at 12:10 valerio0999valerio0999 12.1k77 gold badges3232 silver badges5757 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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./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>

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');
}

本文标签： javascriptcss lastchild with not selectorStack Overflow