CSS text-decoration property cannot be overridden by child element [duplicate]

Question

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

Take a look at this simple example:

<a href="#"> A <span>red</span> anchor </a>

a {
    color:blue;
    font-family:Times New Roman;
    text-decoration:underline; 
}

span {
    color:red;
    font-family:Arial;
    text-decoration:none;   
}

Live demo: http://jsfiddle.net/5t9sV/

As you can see in the demo on JSfiddle, the SPAN element overrides the color and font-family property values of its ancestor ANCHOR element. However, the text-decoration property does not get overridden for some reason.

I assume that some CSS properties can be overridden by ancestor elements, and some other CSS properties cannot.

Is that so? And if yes, how can I know which ones can and cannot be overridden?

Answer 1

From the text-decoration spec:

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

The answer in the linked question further quotes (I can't find this text in the spec anymore however):

Text decorations on inline boxes are drawn across the entire element, going across any descendant elements without paying any attention to their presence.

And another quote, CSS3 seems to introduce text-decoration-skip, intended to address this by applying the property on the descendant (in your case, <span>):

This property specifies what parts of the element's content any text decoration affecting the element must skip over. It controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors.

Answer 2

As suggested by Pekka, here is my answer:

The text decoration DOES get changed when you set the text-decoration value. The problem is that since the Parent Element (the anchor) surrounds the span, it looks as though the span is getting underlined.

This is made obvious if you set the text-decoration of the span to true, because it make the underline blue for JUST the span.