CODEWITHSUNDEEP
htmlcss
Phrogz
Phrogz

Reputation: 303261

Prevent parent underline from underlining child element

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.

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

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

Upvotes: 3

Views: 2031

Answers (1)

Zach Rattner
Zach Rattner

Reputation: 21353

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>

Upvotes: 3

Related Questions