CODEWITHSUNDEEP
css
popClingwrap
popClingwrap

Reputation: 4217

CSS Selection of an element based on the children of a sibling

I am messing around with a project at work and trying to get my head around CSS as I go. After a lot of failed attempts I have built a toggle switch based on a check box but now I want to change the style of a sibling element based on the state of the check box.

Here is a fiddle showing my code

What I want to do is have the copy within <span class="toggleLabel"> change color when the checkbox is checked / unchecked.

I'm hoping that this is straightforward and I've just been looking at it too long to see that solution.

I am not tied to any of this code so can rearrange the HTML or the CSS however necessary. If you have the time and inclination to advise on this it would be greatly appreciated.

Cheers in advance

Upvotes: 0

Views: 43

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191729

You can't select parents in CSS ... yet. The only way you could do this with CSS alone is to rearrange the HTML so that the span is a sibling of the input. Then you could use :checked ~ .toggleLabel.

If you don't want to / can't rearrange the HTML, JavaScript is your only choice.

http://jsfiddle.net/aLH3u/3/

Upvotes: 4

Related Questions