: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
Rägnar O'ock•16mo 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 Verve
Igor Verve•16mo ago
@ragnar_oock https://codepen.io/IgorVerve/pen/qBQLNpm I want to target the li with content "List 6"
Igor
CodePen
qBQLNpm
...
Jochem
Jochem•16mo 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
Rägnar O'ock•16mo 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 Verve
Igor Verve•16mo ago
Thanks, both solutions work, I will play around with them and see which ones fits my needs better.
Want results from more Discord servers?
Add your server