Strikethrough a tr excluding some text

Question

I have a tr(table row) that needs to be strike through .. but there is some content which should not apply the css so i have created a separate class for it but it does not seem to work ..

HTML

<tr class="status">
    <td class="content" width="100%" align="left" >
        <span class="subheading">
            sub-Heading
        </span>
        Content
    </td>
</tr>

CSS

.status {
text-decoration: line-through;
}
.status .subheading{
text-decoration: none !important;
}

Any ideas or corrections are welcomed ..

Basically... **you can't** - http://stackoverflow.com/questions/36131782/override-text-decoration-on-child-element — Paulie_D, May 11 '16 at 11:16
@Rafay - A child cannot override it's parent.... So, not possible — masmrdrr, May 11 '16 at 11:28

score 1 · Accepted Answer · answered May 11 '16 at 11:35

As per documentation Its not possible ..

https://www.w3.org/TR/CSS21/text.html#lining-striking-props

Solution:

HTML

<tr>
    <td class="content" width="100%" align="left" >
        <span class="subheading">
            sub-Heading
        </span>
        <span class="status">
        Content
        </span>
    </td>
</tr>

CSS

.status {
text-decoration: line-through;
}

Yes it creates a messier code ..

score 0 · Answer 2 · answered May 11 '16 at 11:20

0

I think you have an error in your CSS where your use of '!important' with the .status selector overrides your strikethrough, I would try correcting the CSS like this:

.status {
    text-decoration: line-through;
}
.subheading{
   text-decoration: none !important;
}

Also remember that the property 'text-decoration: line-through;' only draws a line through text and wont strikethrough a tr or td element.

answered May 11 '16 at 11:20

Samuel Barnes

113
10

if i remove the .status before .subheading this would make the changes to where ever it is called .. which can be correct but its not working .. I included .status because i only want subheading which are under status to apply the css – Rafay May 11 '16 at 11:25

Alin-Mihai Bobeica · Answer 3 · 2016-05-11T12:26:32.240

0

CSS

.content span:nth-child(1)
{
text-decoration: line-through;
}
</style>

HTML

<table>
        <tr class="status">
<td class="content" width="100%" align="left" >

        sub-Heading

   <span>Content</span> 
</td>

Now i have no idea how many <td>'s you have in your <tr>. but this is how i got the answer you're looking for in the given code.

edited May 11 '16 at 12:26

answered May 11 '16 at 12:20

Alin-Mihai Bobeica

5
5

Strikethrough a tr excluding some text

3 Answers3