Kevin Powell - Community•17mo ago

:last-child and :not pseudo classes together

I have a bunch of list items inside my <ul> all of which have class of "level0 level-top parent". However, the last 2 list items have an additional class called "mobile-nav-only" as well as "level0 level-top parent" I want to add some CSS to the very last <li> with the class of "level0 level-top parent" BUT ONLY if that li does NOT have "mobile-nav-only". I believe I need to combine both :last-child and :not pseudo classes but I'm struggling to figure out the correct syntax. Any help appreciated, thank you 🙂 P.S. I cannot change the markup or add additional CSS classes

5 Replies

Rägnar O'ock•17mo ago

I think I see what you mean, but can you make a minimal reproduction of what you have. A codepen would be ideal (https://pen.new)

CodePen

...

Igor VerveOP•17mo ago

@ragnar_oock https://codepen.io/IgorVerve/pen/qBQLNpm I want to target the li with content "List 6"

Igor

CodePen

qBQLNpm

...

Jochem•17mo ago

You can use this if you don't mind relatively mediocre support:

li:nth-last-child(1 of :not(.mobile-nav-only)) {
  color: red;
}

li:nth-last-child(1 of :not(.mobile-nav-only)) {
  color: red;
}

https://caniuse.com/css-nth-child-of

Rägnar O'ock•17mo ago

If you want a bit better support you can do this instead:

.level0:has( + .mobile-nav-only):not(.mobile-nav-only) {
  background: lime;
}

.level0:has( + .mobile-nav-only):not(.mobile-nav-only) {
  background: lime;
}

Tho if you ever have another .level0 followed by a .mobile-nav-only it will be matched too

Igor VerveOP•17mo ago

Thanks, both solutions work, I will play around with them and see which ones fits my needs better.

Gaming

Programming

:last-child and :not pseudo classes together