0

I have the below HTML code

    <div class="form-checkboxes">
         <div class="js-form-item">
            <input data-drupal-selector="edit-field-faqs-categories-target-id-24" type="checkbox" id="edit-field-faqs-categories-target-id-24--sdfdf" name="field_faqs_categories_target_id[24]" value="24" checked="checked" class="form-checkbox">
            <label for="edit-field-faqs-categories-target-id-24--sdfdf" class="option">APIs</label>
          </div>

        <div class="js-form-item">
            <input data-drupal-selector="edit-field-faqs-categories-target-id-21" type="checkbox" id="edit-field-faqs-categories-target-id-21--wwww" name="field_faqs_categories_target_id[21]" value="21" checked="checked" class="form-checkbox">
            <label for="edit-field-faqs-categories-target-id-21--wwww" class="option">Business</label>
          </div>
    </div>

I have input checkboxes with a parent div js-form-item. If the checkbox is checked I want to add a background color to the parent div I tried the below code, but its not working

 .js-form-item:has(> input[type=checkbox]:checked){ 
   background:#000000
  }

Can anyone please help

Sandeep Akula
  • 1
  • 2
  • It is not possible to go upwards in the DOM when styling. CSS standard does not allow going upwards, which means you can not apply styles to parents by referencing children. JavaScript has the solution, though. – Cristian Sarghe Jun 24 '20 at 19:14
  • you can use it using jquery or JS like @CristianSarghe mentioned, you can not go upwards in css. you can do with jquery like this `$(element).parent().toggleClass("enable");` – Wahab Shah Jun 24 '20 at 19:22

1 Answers1

-1

I think your css selector is correct, and should work, but I don't know because I've never used :has because :has isn't supported yet. Check out the browser compatibility section of the MDN page. You also were right to reach for :has: I don't think that your precise usage can be accomplished with pure css. I believe that your options, using current tools, are to use JavaScript or to try to change your styling so that it can just be applied to the checkbox.

wassona
  • 289
  • 1
  • 8