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/

Rubious

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>

Flyman

I need a way around this. I don't mind if its webkit specific – Rubious

I need the sup to remain inside the span while not having the underline. Possible? – Rubious

You mean you can't rearrange the markup? I'm afraid you need a JS based solution then. – Flyman

I would do fine with a js solution too. there is too much mess with the class of the span(updated by JS). So i would rather leave the markup as it is. – Rubious

Are you using jQuery? If yes, the run this: $('#id1').detach().insertAfter('span.c1');. Let me know if you need a more generic solution (that doesn't rely on ids). jsfiddle.net/mrchief/DTpEa/25 – Flyman

doing that won't apply any styling of id1 to the c1 class :( jsfiddle.net/sasidhar/eVRY2/1 – Rubious

Here's an updated fiddle: jsfiddle.net/mrchief/eVRY2/2. What I would advise is instead of styling by id, style the sup by a class. Then you can say: $('#id1').detach().insertAfter('span.c1').removeClass().addClass('c1 c2');. Demo: jsfiddle.net/mrchief/eVRY2/3 – Flyman

This seems to be a much cleaner approach.......... jsfiddle.net/sasidhar/eYXhx/1 – Rubious

@sasidhar: Was under the impression that you cannot change the markup. But now it seems that you can and wanted to keep it within the span because you wanted the styles to follow. Had I known that, I'd not have suggested the JS way. :). Anyway, glad that you got it working the simple way! – Flyman

It turns out that text-decoration is special, and doesn't cascade like everything else. – Surfacetosurface

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

Chatter

Y so? y can't the span element contain further elements? my actual code has more complex styling and is handled by js to add and remove different classes, so i am not interested in removing the superscript from the span – Rubious

@Rubious Text is treated in blocks and styling ignores sub-elements (for the most part). CSS3's text-decoration-skip is designed to deal with this, but it isn't really implemented yet. – Vaticination

Answer 3

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

Achromat

Answer 4

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

Rubious

Answer 5

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

Baumgardner

Answer 6

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?

Surfacetosurface