CSS CheckBox Hack for Click Event not Works when nested in a DIV

Question

How i can add the checkbox and label css click event inside a DIV? the below codes not works for me, if i remove "" its working perfect. Why is happening?

HTML

<div id="wrapper">
       <input name="" type="checkbox" value="" id="hub" class="hub"  style="display:none;"/>
       <label for="hub"  class="hub2"></label>
    </div>

    <div class="slide"> 
       the contents
    </div>

CSS

.slide{
    background:red; 
}


input[type=checkbox].hub:checked ~ .slide {
    background:green !important;    
}

.hub and .slide are not in the same node, ~ is for siblings

Jonathan de M.
– Jonathan de M.

2013-06-09 07:34:23 +00:00
Commented Jun 9, 2013 at 7:34 — Jonathan de M.
– Jonathan de M., Commented Jun 9, 2013 at 7:34

Jonathan de M. · Accepted Answer · 2013-10-09 18:11:46Z

2

You must put your .slide element along with the label and the input[type=checkbox], like following

<div id="wrapper">
   <input name="" type="checkbox" value="" id="hub" class="hub"  style="display:none;"/>
   <label for="hub"  class="hub2">open</label>
   <div class="slide"> 
      the contents
   </div>
</div>

Demo

More on sibling selector

edited Oct 9, 2013 at 18:11

answered Jun 9, 2013 at 7:37

Jonathan de M.

9,8488 gold badges50 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jonathan de M. Over a year ago

without js no, you cannot, the css selector only allow children or descendent siblings

Collectives™ on Stack Overflow

CSS CheckBox Hack for Click Event not Works when nested in a DIV

HTML

CSS

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

HTML

CSS

1 Answer 1

1 Comment

Related