Prevent parent underline from underlining child element

Question

Given this pared-down test case:

<!DOCTYPE html>
<html><head><title>No Underline Please</title>
<style type="text/css">
  li       { text-decoration:underline        }
  li .rule { text-decoration:none ! important }
</style>
</head><body>
  <ol><li><span class="rule">RULE</span> CONTENT</li></ol>
</body></html>

I want to underline CONTENT but not underline RULE. However, Chrome, FF, and IE9 all underline RULE. Presumably this is standards-compliant behavior, given that they all agree.

What spec am I forgetting that is preventing me from overriding the text-decoration?
How can I achieve the result I want?

Fiddle here: http://jsfiddle.net/F3Grr/

http://stackoverflow.com/questions/4481318/css-text-decoration-property-cannot-be-overridden-by-ancestor-element/4481356#4481356 — thirtydot, Oct 21 '11 at 15:40

Zach Rattner · Accepted Answer · 2011-10-21T15:16:00.000

3

The entire li element is being underlined. The li.rule rule is being rendered, but the underline applies to the entire list item.

You should wrap the content you want to be underlined inside another inline element. Here's one example:

<!DOCTYPE html>
<html><head><title>No Underline! You're welcome.</title>
<style type="text/css">
  li span.emphasis { text-decoration:underline; }
</style>
</head><body>
  <ol><li>RULE <span class="emphasis">CONTENT</span></li></ol>
</body></html>

edited Oct 21 '11 at 15:16

answered Oct 21 '11 at 15:09

Zach Rattner

20,745
9
59
82

Thanks, I just realized the same thing. I'll accept your answer in 9 minutes _if_ you change the class name to [not describe the visual style being applied](http://phrogz.net/CSS/HowToDevelopWithCSS.html#semanticselector). ;) – Phrogz Oct 21 '11 at 15:11
Haha, but you're ok with me indenting like that? Illustrative code differs from production code, imho. – Zach Rattner Oct 21 '11 at 15:16
Note that while your answer (wrap the content you want to underline) is the correct workaround for this problem, as shown by [this test](http://jsfiddle.net/F3Grr/8/) we can see that `text-decoration` accumulates on descendants (rather than being inherited by them). – Phrogz Oct 21 '11 at 19:17
1

Also interesting to note is [this comment](http://reference.sitepoint.com/css/text-decoration): "Firefox versions up to and including 3.5; Safari up to and including version 4; Chrome up to and including version 3; all propagate text decoration values to floating descendants." Even the modern browsers are not properly honoring the specs. – Phrogz Oct 21 '11 at 19:22

Prevent parent underline from underlining child element

1 Answers1