How to CSS the 'unchecked' state of a checkbox switch?

I should note I have this working in codepen, and can use:

[type="checkbox"]:not(:checked) + label .span2 {display:none;}

to make my object disappear.

But when I try it on my WordPress site, it doesn't seem to recognize at all any such object. I can still access the checked state with

.switch input:checked~label .span1 {display:none;}

But I can't make my other thing disappear when it's unchecked (note: I can uncheck the box and affect changes using

.switch label {change}

I just can't make my stuff disappear when it's unchecked.

Here's my html:

<div class="switch">
  <input type="checkbox" checked>
  <label>
    <span class="span1">
      <span class="word1">
      hiiiiii sakdfjs sakdjf
      </span>
    </span>
    <span class="span2">
      <span class="word2">
        ho
      </span>
    </span>
  </label>
</div>

Just to specify, I want to make one thing disappear in the checked state and a different thing disappear in the unchecked state. This works on Codepen but not on my WordPress site. (I tried removing all the CSS lines that might effect it but I didn't succed that way, and the CSS sheet is really long as it's the WordPress 2020 theme).