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!

Recommended Answers

All 4 Replies

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.

Member Avatar

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.