Remove underline from span inside anchor

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