CSS - double pseudo classes.. is this possible

Question

.onoffswitch-checkbox:checked ~ .onoffswitch-inner:hover {
   background: #0095cd;
}

Is this possible?

Basically I want a hover class on the .onoffswitch-inner when the sibling checkbox is checked.

Answer 1

Just go ahead. It works:

http://jsfiddle.net/trungdq88/z38Y6/1/

HTML

<label>
    <input type="checkbox" class="onoffswitch-checkbox"/> Check this box
    <div class="onoffswitch-inner">And hover here</div>
</label>

CSS:

.onoffswitch-checkbox:checked ~ .onoffswitch-inner:hover {
   background: #0095cd;
}

Answer 2

http://jsfiddle.net/EyjEZ/7/

Note: The label tag should have preferably a for attribute which than can be referenced to the checkbox. For accessibility and usability reasons. Thus screen readers lik it and it enlarges the area to click on and adds tab focus.

This will make any sibling element of the checked checkbox with that class get that hover style. See: http://jsfiddle.net/YRe3n/1/

IE 8 does not support :checked

 <form action="#" method="post">
  <fieldset>
 <input type="checkbox" class="onoffswitch-checkbox" id="foo" name="bar" /><label for="foo">Foo</label>
 <p class="onoffswitch-inner">This is the inner</p>
  </fieldset>
</form>

.onoffswitch-checkbox:checked ~ .onoffswitch-inner:hover {
   background: #0095cd;
}

This would work as well if you need to target the next sibling element only.

.onoffswitch-checkbox:checked + label + .onoffswitch-inner:hover {
   background: #0095cd;
}

http://jsfiddle.net/2scGR/1/