nav a div { display: none; } is being ignored. I don't know why, it's just these 3 simple "selectors" on to another, I really can't see it. In <nav> there's a <a> and there's <div> in this <a> that needs to be hidden. It doesn't hide.

This isn't 1st April Fools joke, I really CAN'T see it. It's so simple, yet I screwed it up!

Edited by RikTelner

1 Year
Discussion Span
Last Post by godfreysseki

Hi RikTelner,

Figuring out selector problems drives me crazy sometimes, but I think I have yours figured out. The selector should be nav div, without the a, because both a and div are children of nav but div is not a child of a. This change worked for me in your fiddle - hope this helps.


"but div is not a child of a"
But it is :(

If I use your solution. Then how can I issue nav a:hover div { display: inline-block; } ?


I think I see what you are doing now.

Try this:
nav a:hover + div {display: inline-block;}

The added plus sign links the div to the preceding a:hover. So the div appears when you hover over a.


write this and it will work for you.
<nav> <a href="#"> <div> Some text</div> </a> </nav>
and the css as
nav a div{display: none;}

or have this to work
<nav> <div> Some text</div> </nav>
and the css as
nav div{display: none;}

Edited by godfreysseki: more details

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.