Unable to un-line-through a nested element

Question

I want to apply a line-through to the contents of <td> tags except for the <a> tag within a tag. The styles I am applying do not seem to work though... any ideas?

Here's the example to play with (I'm testing in IE8): http://jsfiddle.net/9qbsq/

Here's what the markup looks like...

HTML

<table border=1>
  <tr class="highlight">
      <td>hello</td>
      <td><a href="#">world</a></td>
  </tr>
  <tr>
      <td>foo</td>
      <td>bar</td>
  </tr>
</table>

CSS

.highlight td { text-decoration:line-through; }
.highlight td a { text-decoration:none; }

Answer 1

That's how it should work - whilst the a element does have text-decoration: none, the line through is still being set.

You could add a span in each td as a workaround, and set the text-decoration: line-through on that span if required.

Answer 2

You'll have to wrap the text in something like a span, and apply text-decoration: line-through to that: http://jsfiddle.net/9qbsq/1/

That way, you don't have to achieve the impossible task of removing line-through on a child element when a parent element has line-through applied.

Answer 3

The problem is that text-decoration propagates to descendants:

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 [...]

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.

But there are two exceptions: out-of-flow and atomic inline-level descendants:

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.

Therefore, you can use display: inline-block on a child to prevent its parent's text-decoration from affecting it.

.highlight > td {
  text-decoration: line-through;
}
.highlight > td > a {
  display: inline-block; /* Remove parent's text-decoration */
  text-decoration: none; /* Remove default link underline */
}

<table border=1>
  <tr class="highlight">
    <td>hello</td>
    <td><a href="#">world</a></td>
  </tr>
  <tr>
    <td>foo</td>
    <td>bar</td>
  </tr>
</table>