0

Is there a way to target a list item's last child "only" if it has children in CSS3?

I'm trying to cancel out a border-radius on this item only, as seen below:

enter image description here

I have:

#navbar > ul ul li:last-child

I need:

#navbar > ul ul li:last-child**:has-children**

The only solution I've found is a jQuery workaround:

$('#navbar > ul ul li:has(ul.sub)').addClass('has_sub');
WebMW
  • 420
  • 2
  • 11
  • 24
  • Not sure CSS3 can do this. It's too bad, in this case, that `:empty` counts text nodes as well. Otherwise something like `:not(:empty)` would be cool. https://www.w3.org/TR/css3-selectors/#selectors – Michael Benjamin Apr 06 '16 at 04:04
  • jQuery is a solid alternative. Although if you really want to stick with CSS consider this: Instead of targeting that last-child of the main menu to remove the border radius, target the first child of the sub menu. Give it a bit of negative margin so it extends into the border radius area, filling the gap. – Michael Benjamin Apr 06 '16 at 04:07

0 Answers0