Question

I have this HTML:

<ul>
<li>
    <ul>
        <li>
            <a href="#"> <span> Test </span> Link </a>
        </li>
    </ul>
</li>
</ul>​

And this CSS:

ul li ul li span {

    text-decoration:none;
}​

Why would the span inside the anchor still have underline?

In other words: How would I get all the text underlined, except the SPAN. Thanks

Answer 1

You need to target the anchor tag and not the span tag so use this

ul li ul li a {
    text-decoration:none;
}​

Reason: text-decoration: underline; is applied to <a> tag by default browser stylesheet, so if you want to over ride it or if you want that none of the <a> tags on your website should have an underline than simply use this

a {
   text-decoration: none;
}

Edit: As I read your comment if you want your text to be underline except the text within <span> than use this

Demo

ul li ul li a {
    text-decoration:underline;
}

ul li ul li a span {
    text-decoration:none;
    display: inline-block;
}