Search code examples
htmlcsshref

Remove underline from link within hyperlinked div

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.

Solution

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