:checked selector not changing desired css

Question

I'm trying to change a wrapper's background color by pressing the checkbox.

.switch_1:checked~.table_wrapper {
  background: black;
}

<li class="nav-item">
  <div class="switch_box box_1">
    <input type="checkbox" class="switch_1">
  </div>
</li>
<div class="table_wrapper">
</div>

`.table_wrapper` isn't a sibling of `.switch` so your selector with `~` won't work. And since there's no parent selector yet, there'd be no way to do this with CSS alone — j08691, Jan 26 '18 at 21:39
The `~` is the general *sibling* selector. So unless your wrapper is a sibling (child of same parent element) of the input, you cannot access it. — chriskirknielsen, Jan 26 '18 at 21:39

score 2 · Accepted Answer · answered Jan 26 '18 at 21:46

If you can't change the DOM structure, you can't do it with CSS but you can do it with JS.

$(".switch_1").change(function () {
$('.table_wrapper').toggleClass('active');
});

.table_wrapper.active {
background: black
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li class="nav-item">
  <div class="switch_box box_1">
    <input type="checkbox" class="switch_1">
  </div>
</li>
<div class="table_wrapper">
asd
</div>

score 0 · Answer 2 · answered Jan 26 '18 at 21:45

Here's what would work. The element needs to be a sibling (side-by-side) for it to work.

There's currently no "parent selector" in css: Is there a CSS parent selector?

So I think your best option to deliver the functionality you're working towards would be with javaScript.

.switch_1:checked~.table_wrapper {
  background: black;
}

<li class="nav-item">
  <div class="switch_box box_1">
    <input type="checkbox" class="switch_1">
    
    <div class="table_wrapper">hello</div>
  </div>
</li>

Thanks for the help, its working indeed, but I need the div out of the li's. — Amir, Jan 26 '18 at 21:47

:checked selector not changing desired css

2 Answers2