css - how to hide href link nested inside a div?

Question

I have a div with an anchor tag inside it. I want to set the display of just the "a" tag as none. How would I go about doing it? It looks like-

<div id="upper">
    <a href="http://myLink">Hide Me!</a>
    <p>Not to hide this text </p>
</div>

I tried doing -

#upper a {display:none;}

However this does not work for some reason. What am I doing wrong?

Answer 1

If someone suggests, don't #upper a {display:none !important;} as this introduce more issues in the future than it would sove immediately.

#upper a {display:none;} would work unless there is a more specific rule overriding it somewhere, this can be inspected with firebug or Chrome inspector etc.