Not working CSS selector

Question

My head is about to explode on this one. Check this fiddle please:

http://jsfiddle.net/337C7/1/

section ul li {
    text-decoration: underline;
}

section ul li ul li {
    text-decoration: none !important;
}

Basically I have unordered list and inside that another one. Im just trying to remove the text-decoration on the children ul. For whatever reason it doesnt want to work.. Am I stupid?

Answer 1

According to MDN:

Text decorations draw across descendant elements. This means that it is not possible to disable on a descendant a text decoration that is specified on one of its ancestors.

For example, in the markup: <p>This text has <em>some emphasized words</em> in it.</p> the style rule:p { text-decoration: underline } would cause the entire paragraph to be underlined. However, the style rule: em { text-decoration: none } would not cause any change; the entire paragraph would still be underlined. (However, the rule em { text-decoration: overline } would cause a second decoration to appear on "some emphasized words".)

Answer 2

While the browser might render it without an issue, certain browsers will render the text-decoration, and get confused by the containing element (in this case, the <li>. This fact is proven by @Matthew Rapati's comment). For example, this is from the MDN article on the issue (borrowed from j08691's answer for completeness):

Text decorations draw across descendant elements. This means that it is not possible to disable on a descendant a text decoration that is specified on one of its ancestors.

For example, in the markup: <p>This text has <em>some emphasized words</em> in it.</p> the style rule: p { text-decoration: underline } would cause the entire paragraph to be underlined. However, the style rule: em { text-decoration: none } would not cause any change; the entire paragraph would still be underlined. (However, the rule em { text-decoration: overline } would cause a second decoration to appear on "some emphasized words".)

You should simply place the child <ul> as a sibling, rather than child of the <li>, for example:

<ul>
    <li>bla</li>
    <li>bla bla </li>
    <ul>
        <li>bla bla bla</li>
        <li>bla bla bla bla </li>
        <li>bla bla bla bla bla</li>
        <li>bla bla bla bla bla bla</li>
    </ul>
</ul>

You should then update your selector as follows:

section ul ul li {
    text-decoration: none !important;
}

You can see a working jsFiddle Demo