CSS query does not affect selected element

[RikTelner]

https://jsfiddle.net/jLt3reca/

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!

[Susan_5]

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.

[RikTelner]

"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; } ?

[Susan_5]

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.

[godfreysseki]

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;}