Span inside td does not override td style

Question

I have a span tag inside a td . The td has a class with CSS to set the text-decoration to underline , while the span sets the text-decoration to none . I expect the text inside the span to not be underlined, but for some reason it is. Why?

 .u { text-decoration: underline; } .no-u { text-decoration: none !important; } 

 <table> <tr> <td class="u"> <span class="no-u" style="text-decoration: none !important;">My Text</span> </td> </tr> </table> 

Answer 1

Cannot remove the underlined style for descendants.

http://www.w3.org/TR/CSS21/text.html#lining-striking-props

The 'text-decoration' property on descendant elements cannot have any effect on the decoration of the ancestor.

Answer 2

According to the CSS2 spec, http://www.w3.org/TR/CSS21/text.html#lining-striking-props :

For block containers that establish an inline formatting context, the decorations are propagated to an anonymous inline element that wraps all the in-flow inline-level children of the block container.

This means that that any text and any inline element like <b> , <em> and <span> are all wrapped in an anonymous inline box on which the text decoration is applied.

Furthermore, in the case of a child inline-element, you can apply another text decoration which allows you to have both underline and overline appearing on a span of text. In this case, the underline in painted on one anonymous inline box and the overline is painted on a second (nested) anonymous inline box.

In this example, the td element acts as the block container.

However, this does not apply to inline-blocks .

See the demo at: http://jsfiddle.net/audetwebdesign/MSUHx/