Careful not to misunderstand the syntax. The linked article confusingly has this example: input:checked ~ #main > #findMe … described thusly: “With the ti

Careful not to misunderstand the syntax. The linked article confusingly has this example: input:checked ~ #main > #findMe … described thusly: “With the tilde character on #container input:checked would be able to target #findMe …” Please note the tilde has nothing to do with #findMe. The tilde only relates the input element and #main, which are in-order siblings. (Adjacent in-order siblings, in fact, so + would have worked just as well as ~ in this example.) Please also note that ~ does not select siblings; it selects following siblings. <i>italic</i> <a href="#">link</a> <b>bold</b> With the above HTML, the following selectors are NOT equivalent: i ~ b { /* this will match the bold tag above */ } b ~ i { /* this will NOT match any elements in this example */ }