text-decoration:none doesn't remove text decoration

Question

Consider the following code HTML:

<span class='c1'>Home<sup id='id1'>[2]</sup></span>

CSS:

.c1
{
    text-decoration:underline;
}
#id1
{
    text-decoration:none !important;
}

Now I expected Home to have an underline while the superscript [2] doesn't have the underline. But it so happens that the superscript is also getting the underline. What am i missing here??

http://jsfiddle.net/sasidhar/DTpEa/

Answer 1

If you think about it, the sup isn't underlined. but the span still is. Since the sup is inside the span, you see the underline which appears to be sup's underline.

Consider this demo: http://jsfiddle.net/mrchief/DTpEa/24/

You'll see that the id1 css does take precedence, but you still see the underline which is that of the span.

To solve it, have the sup outside of the span:

<span class='c1'>Home</span><sup id='id1'>[2]</sup>

Answer 2

Here is a correct variant http://jsfiddle.net/rTUDN/

<div>
    <span class='c1'>Home</span>
    <sup id='id1'>[2]</sup>
</div>

.c1
{
    text-decoration:underline;
}
#id1
{
    text-decoration:none;
}