current community

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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;    
}
share|improve this question
1  
.hub and .slide are not in the same node, ~ is for siblings –  Jonathan de M. Jun 9 '13 at 7:34
add comment

1 Answer

up vote 2 down vote accepted

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

share|improve this answer
 
hi Jonathan, its works.... thank you. –  Ajith Prakash Jun 9 '13 at 7:58
 
is any other way to work it same, but in different nodes –  Ajith Prakash Jun 9 '13 at 8:00
 
without js no, you cannot, the css selector only allow children or descendent siblings –  Jonathan de M. Jun 9 '13 at 8:43
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.