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?

Putscher

if you look closely when you toggle the underline for your span class, you'll see that the underline changes. It's just that the underline doesn't stop for the Anchor tag. – Gnathous

@Stefan why not make that an answer - that's the solution: The parent element is the one getting underlined. One would have to terminate the parent element to stop the underlining. I don't think there is a "force no underline" style – Giulietta

@Stefan I don't understand what you mean. – Sapotaceous

@Šime here is an illustration using overline that maybe makes it clearer jsfiddle.net/5t9sV/4 – Giulietta

@Giulietta Aha I get it. The underline "belongs" to the ANCHOR element, so the SPAN element cannot manipulate that underline (because it is not his) – Sapotaceous

@Šime yup. It's like with border properties, those also can't be interrupted by settings in child elements. – Giulietta

@Pekka: Seems CSS3 has introduced text-decoration-skip to deal with this; see my answer. – Basic

@Basic yeah, saw it! Very nice. Although that property somehow feels kludgy to me. I thought of an explicit text-decoration: none-force or something as a better solution to this – Giulietta

@Giulietta Exactly my sentiments. – Basic

@Basic @Giulietta But then the child element would not be able to define its own underline. Using text-decoration-skip in combination with text-decoration, we can produce multi-color underline effects easily: jsfiddle.net/5t9sV/6 (this even works in IE9 beta) – Sapotaceous

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.

Basic

Yes, I get it now. I thought that the line beneath the SPAN element belongs to it, but it doesn't. The ANCHOR element "owns" the whole line, which means that the SPAN element cannot manipulate it. – Sapotaceous

@Šime Vidas: Yeah, which is also why the underline continues blue. – Basic

Please see this test, showing that the text-decoration of an ancestor always applies and accumulates along with any text-decoration of the children. Setting the value to none for a child sadly does not override some 'inherited' value, but instead is rather like adding zero to an existing number. – Apothecium

I think text-decoration-skip: all would have done the trick, but it was removed from the draft. If I understand correctly, current values of text-decoration-skip can't prevent decoration propagation to descendants (except atomic inlines). – Brace

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.

Gnathous

I thought this was the case as well; however, as shown in this test the text-decoration property from an ancestor always applies to nested children, in conjunction with whatever they specify. – Apothecium