CODEWITHSUNDEEP
htmlcsscss-selectors
alexey m
alexey m

Reputation: 13

two labels for one input field with different styles

I need to have two labels for one input field with different styles.

For some reason this code doesn't work. It does work perfectly for first label, and only partially for second label.

this code works

input.switcher[type=checkbox] + label + label

but this doesn't (second label doesn't change color by checking on and off)

input.switcher[type=checkbox]:checked + label + label

any advice how to solve this issue is appreciated!

http://jsfiddle.net/dantetemp/tLPkk/

Upvotes: 1

Views: 2433

Answers (1)

Adrift
Adrift

Reputation: 59859

Strangely it seems to work (in Chrome 28 - where I presume you have the problem judging by the comments) if you change the adjacent sibling combinator to the general sibling combinator, ~ for the second <label> - e.g.

input.switcher[type=checkbox]:checked + label ~ label {
    color: green;
    font-size: 70px;
}

http://jsfiddle.net/tLPkk/1/

Upvotes: 5

Related Questions