Hello,
I would like to select an ancestor (parent) in the navbar in order to change its border-radius when I am hovering over the children.
emphasized text
So far I have:
.main-navigation ul ul:hover .??? {
border-radius: 7px 7px 0px 0px;}
What is the correct code to select the ancestor (parent) of the children?
Thanks.
Please show the HTML for your navbar.
I just read that css does not allow the selection of a parent. So perhaps this is pointless.
Ah - perhaps I misunderstood what you’re trying to achieve. I thought this was a follow-on from your other thread.
If you want the parent to be affected when you hover over the child, then I believe you’ll need to use JavaScript.
Yes, probably. I decided to go another direction and avoid the issue. Thanks.
Could you instead of the general question to select a parent, what is not how html and css works, describe exactly what you want to achieve?
If you e.g. want a list item to change when you hover its children, that could be done in CSS.
But we would need to see your code to give a suggestion. 
EDIT)
To discuss how to highlight current page I suggest we continue in your other thread: Highlighting of Menu Items
I knew ther was a way to do this, but could not remember the (pseudo) selector that does it, this morning.
Now it came to me, it’s :focus-within you are looking for.
Thank you. As I wrote above, I moved on and avoided the issue. I will study focus-within though.
With regard to previous answers, this previously wasn’t possible with pure CSS.
But since the major, current browsers have adopted this pseudo class, it is now possilble.
The question you had was if you could select a parent on hover, not on focus, so the question still stands.
I think you’re jumping into premature conclusions.
If you give the code, or an example of what you are working with, we could see the circumstances and maybe tell you what happens when you hover an item.
This was never a problem.
If the sub-menu is nested within the main menu, you are still hovering the parent element, while you are hovering the sub-menu item nested within. So a simple :hover selector for both elements will do.
But the problem I always saw (in the past now) with this kind of drop-down menu system, was keyboard accessibilty.
For that I generally pair my :hover selectors with :focus selectors, so keybord users see the same highlighting as mouse users, as they tab through the menu.
But with drop-down sub-menus, this was an issue, as the :hover was used to make the sub-menu appear (drop down), as could :focus. But when a user tabs focus onto a sub-menu item, the parent loses focus, and the sub-menu becomes invisible again, and the user is tabbing blind.
Javascript was always the answer, but I wanted a way to do it without javascript, and :focus-within is exaclty that.
Admittedly, this is not what the OP was asking specifically about, but asking a simple question, and then replies saying it can’t be done, tricked me into thinking I was answering a more difficult question. 
But still it is quite relevant to the job in hand, and worthy of consideration by the OP and other readers.
Exactly, I think the OP wasn’t clear of that hover also is on the item’s parents, so they could also be “selected” as CSS selectors to style.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.