How to select a div based on a checked input box in an adjacent div

Question

Given the code segment below, is there a way to write a CSS selector that targets the div of class="item_text" provided that the checkbox is checked?

 <div class="row"> <div class="col-xs-1"> <input name="item_checkbox" type="checkbox" /> </div> <div class="col-xs-11"> <div class="item_text" contenteditable="true"> To rearrange your list, drag and drop items </div> </div> </div> 

Answer 1

As has been stated in the comments, it's not possible to do this in CSS alone as CSS rules cannot traverse up the DOM.

As you've tagged the question with jQuery, you could use that instead to affect the required element when the checkbox state is changed. Try this:

 $('.row :checkbox').change(function() { $(this).closest('.row').find('.item_text').toggleClass('foo', this.checked); }); 

 .foo { border: 1px solid #C00; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-xs-1"> <input name="item_checkbox" type="checkbox" /> </div> <div class="col-xs-11"> <div class="item_text" contenteditable="true"> To rearrange your list, drag and drop items </div> </div> </div> 

Answer 2

This is possible . I just rearranged the dom slightly then added some css:

 input[name=item_checkbox]:checked + div.item_text { display:none; } 

 <div class="row"> <div class="col-xs-11"> <input name="item_checkbox" type="checkbox" /> <div class="item_text" contenteditable="true"> To rearrange your list, drag and drop items </div> </div> </div> 

Answer 3

这仅适用于jQuery / jQuery，因为CSS选择器无法向上遍历（从子级到父级）。