CODEWITHSUNDEEP
htmlcsscss-selectors
nimo23
nimo23

Reputation: 5680

select last child which has not a specified class

I have this css-selector

.buttons:last-child::not(a.hide)

<div class="buttons">
<a href="#tab1">1</a>
<a href="#tab2">3</a>
<a href="#tab3" class="hide">3</a>
</div>

I want to select the last child which has not a class of ".hide".

But it does not work. What is wrong?

Upvotes: 0

Views: 57

Answers (1)

Joachim Lous
Joachim Lous

Reputation: 1541

Lots is wrong:

  • not only accepts simple selectors, so either an element or a class. For your example, not(.hide) should do the job.

  • not(.hide) is not a pseudo-element, it is a pseudo-class. As such it should be preceded by a single colon, not a double one

  • .button:last-child does not select the last child of .buttons, it selects any element of class .buttons that is the last child of its parent. To select the last a in buttons use .buttons>a:last-child

  • Combining pseudo-selectors requires candidates to match them all. So :last-child:not(.hide) will select elements that are both a last child and not of class hide. Of which you have none. Change the class name in the css or the html and you will match the final element.

In fact I'm not sure you can achieve what you want with pure css.

Upvotes: 2

Related Questions