user2197029 user2197029 - 17 days ago 5
CSS Question

Target two siblings of input:checked

I'm trying to style two siblings -- a span and a div -- of input:checked like this...

input:checked + span {styles}

input:checked + div {styles}


Not working... What am I missing?

Answer

Your DOM structure is the problem. <span> and <div> are probably not sibling to inputs because css is fine. Here is example of how sibling of inputs work:

<input type="radio" name="group1" checked/>
<span>span</span>
<input type="radio" name="group1" />
<div>div</div>

And css:

input:checked + span {color:red;}

input:checked + div {color:red;}

And here is JSFiddle: https://jsfiddle.net/marszurgot/yawksjvj/