3

The following code show have two nested lists. The outer one with text-decoration:line-through property and the other with no line through. How can I remove this inner line-through or not apply it in the first place?!! I want line-through on the word "outer" but not "inner"

    <DOCTYPE html>
<header><style>
ol li {text-decoration:line-through; color:red;}
ol li ul li{text-decoration:none; color:pink;}

</style></header>
<body>
    <ol>
        <li>Outter
            <ul>
                <li>
                    Inner
                </li>
            </ul>
        </li>
    </ol>
</body>
db-user
  • 223
  • 1
  • 2
  • 11
  • are you trying to remove the line-through from the inner or outer or both? – dezman Oct 22 '13 at 21:54
  • Looks like it can't be done. Really surprising actually: http://stackoverflow.com/a/1823388/1977420 – mikegertrudes Oct 22 '13 at 22:08
  • @idotpdot It CAN be done. See [my own answer](http://stackoverflow.com/a/17347691/1529630) of the same question you linked. – Oriol Oct 22 '13 at 22:12
  • 1
    Agreed. You found a great solution. I posted a link to yours on a few of the similar posts out there (including the one I linked). Well done, I voted you up. – mikegertrudes Oct 22 '13 at 22:17

1 Answers1

13

You can use display: inline-block to avoid parent's text-decoration affecting its children.

Demo

It works because, according to the specs,

When specified on or propagated to an inline element, it affects all the boxes generated by that element, and is further propagated to any in-flow block-level boxes that split the inline (see section 9.2.1.1). But, in CSS 2.1, it is undefined whether the decoration propagates into block-level tables. 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. For all other elements it is propagated to any in-flow children. Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

Oriol
  • 274,082
  • 63
  • 437
  • 513