Unable to remove text-decoration from label

Question

I have the following example HTML:

<div class="a">
    <div>
        <ul class="b">
            <li class="c">
                <input id="123" type="checkbox" checked></input>
                <label for="123">test</label>
            </li>
            <li class="c">
                <input id="456" type="checkbox"></input>
                <label for="456">test</label>
            </li>
        </ul>
    </div>
</div>

And the following CSS:

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

.a .b .c input[type="checkbox"]:not(:checked) + label {
    text-decoration: none !important;
}

This can be found at this JS fiddle: https://jsfiddle.net/4q8a7yox/1/

I would like to remove the line-through from all labels for unchecked items. The weird thing is that Chrome console shows the 'computed' text-decoration as 'none', yet it still shows it. All browsers (IE10 and FF) fail in a similar way. Any idea what is going on here?

score 1 · Accepted Answer · edited May 23 '17 at 12:14

1

According to the answer of this question that's not possible. You cannot remove text-decoration properties for children nodes.

So the best thing to do is not adding the text-decoration: line-through; to your .a elements and then trying to remove it for unchecked inputs, but instead adding the line-through only for checked inputs.

EDIT: try this https://jsfiddle.net/b2bL8ksn/

edited May 23 '17 at 12:14

Community

1
1

answered Apr 09 '15 at 16:19

PGBI

700
6
18

so it's a bug in HTML/CSS spec? it doesn't make any sense, you can remove any other CSS style – automaton Apr 09 '15 at 16:22
1

Cause that's not technically inheritance. Read this, it will explain far better than I can do: http://www.sitepoint.com/web-foundations/text-decoration-css-property/ – PGBI Apr 09 '15 at 16:24
thank you, this explains it. this is probably the least intuitive design i have seen in quite awhile. a shame it is done this way. – automaton Apr 09 '15 at 16:28
1

reading again the link i provided, it seems like you can avoid transmitting the line-through if you "take away" the children from the parent box. So i've tried setting an absolute position, and it seems to work (on safari mac at least). See my edited answer. – PGBI Apr 09 '15 at 16:30

dowomenfart · Answer 2 · 2015-04-09T16:27:34.890

0

Change your selector from .a to label.

DEMO

label {
    text-decoration: line-through;
}

EDIT:

Updated Demo

use more specificity. Drill down into the html label. for this example it would be:

.a > div > .b > .c > label { 
   text-decoration: line-through; 
}

edited Apr 09 '15 at 16:27

answered Apr 09 '15 at 16:08

dowomenfart

2,803
2
15
17

this would be for all labels which is not desired. this is part of a much bigger CSS for a web application, i've made it simple for this example – automaton Apr 09 '15 at 16:10
@automaton Then use more specificity. drill down into the html label. for this example it would be `.a > div > .b > .c > label { text-decoration: line-through; }` – dowomenfart Apr 09 '15 at 16:18

score 0 · Answer 3 · answered Apr 09 '15 at 16:09

0

Can you just reverse the css?

.a .b .c input[type="checkbox"]:checked + label {
    text-decoration: line-through;
}

answered Apr 09 '15 at 16:09

RLS

311
1
13

at the moment no because the condition of line-through is actually applied at the parent under a different condition. i've made the example easier – automaton Apr 09 '15 at 16:10

Anshuk · Answer 4 · 2015-04-09T16:19:31.753

0

Please use this css. i have just little changed on your CSS.

   .a .b .c input[type=checkbox] + label {
    text-decoration: line-through;
    }

   .a .b .c input[type="checkbox"]:not(:checked) + label {
    text-decoration: inherit !important;
   }

edited Apr 09 '15 at 16:19

answered Apr 09 '15 at 16:13

Anshuk

91
8

But I hate `!important` :) – Kheema Pandey Apr 09 '15 at 16:18
me too hate !important. but if other css is there with same classes may be there is a chance for overflow. :) – Anshuk Apr 09 '15 at 16:20
specifically targeting the child will work, you are right. however i am curious why it must be done that way, when other CSS styles can be applied on the parent and removed on the children? doesn't make any sense – automaton Apr 09 '15 at 16:22

score 0 · Answer 5 · answered Apr 09 '15 at 16:15

0

try that:

.a .c input[type="checkbox"]:checked + label {
text-decoration: line-through; }

answered Apr 09 '15 at 16:15

studiojasper_pl

144
6

Unable to remove text-decoration from label

5 Answers5