I’m impressed with the logical capabilities of modern CSS, even if it does result in mind-bending selectors like this:
li:not(:has(> a:hover))
I just wrote that bit of CSS to resolve an issue I have with dropdown menus on a site I’m working on.
The top-level nav items need to have a dark blue background and white text when you’re hovering directly over the link itself. They also have an accessibility toggle caret next to (but not inside) the link.
When you’re hovering over the accessibility toggle, or the submenu — i.e. anywhere within the li that isn’t the a directly inside it — then the top-level item needs to have a light blue background with dark blue text.
The problem I had was, the caret was staying white when I hovered over any part of the li.
This CSS selector is perfect for styling the li under all conditions except when the user is hovering over the direct descendant a tag. If you’re hovering somewhere within the li itself, i.e. the caret, or anywhere at all inside the nested ul for the submenu (even on a link within that submenu), then the above condition applies.