Why Does The Selector Not Change The Element?-CodePudding

Following the selector rules, when checking whether the checkbox is checked, the ~ selector should apply display: none; in the span elements, but this is not happening.

both the input has the same parent element and spans are preceded by input.

Because it does not work?

https://codepen.io/fx-hunter/pen/MWBaPBW?editors=1100

I tried this

<div >
  <div >
    <input  type="checkbox"/>
    <span>off</span>
    <span>on</span>
  </div>
</div>

    

.wrapper .content-input .botao:checked ~ .wrapper .content-input span {display: none;}

CodePudding user response：

This is happening because you are using ~ selector with intention of getting the ancestor but ~ selector is to get sibling of previous selector.

To fix this use

.wrapper .content-input .botao:checked ~ span {
  display: none;
}

CodePudding user response：

The two sequences share the same parent in the document tree, so there's no need to call the span by saying .wrapper .content-input span. Just saying span works fine!

.wrapper .content-input .botao:checked ~ span {
    display: none;
}

CodePudding user response：

Its working but you are targetting elements wrong. So, its causing the issue.

/*
.botao:checked {
  display: none;
}
*/

.botao:checked ~ span {
  display: none;
}

<div >
  <div >
    <input  type="checkbox">
    <span>off</span>
    <span>on</span>
  </div>
</div>