text-decoration:none doesn't remove text decoration

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/

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>

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

How about underlining the sup in the same color as your background? The span would be underlined and the sup underlining would overlay it.

http://jsfiddle.net/sasidhar/eYXhx/1/

The trick is to add

display: inline-block;

to the object you want to not have the same text-decoration, as below:

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

It turns out that text-decoration is special, (and especially annoying) in that it doesn't cascade like other properties.

See: How do I get this CSS text-decoration override to work?