Remove underline from link within hyperlinked div

Question

I am using the html below

<a href=""><div class="logo"><span class="whologo">hyperlinked text </span>
</div></a>

the problem i am having is that the only way to remove underline from the span text is using a:link{text-decoration:none;} but this removes underlines from ALL links from the whole page

I have tried

a.logo:link{text-decoration:none;}

but it doesnt remove the hyperlink from the span element.

Answer 1

You have a wrong hierarchy there and bad element selection. In your case, the most accurate CSS would be:

a div.logo span.whologo {text-decoration:none;}

---

But I suggest this approach:

<div class="logo"><a href=""><span class="whologo">hyperlinked text </span></a>

And CSS:

div.logo a {text-decoration:none;}

Or include the span if needed (but only if the span element has underlines, like Hans pointed out in the comment):

div.logo a span.whologo {text-decoration:none;}