Careful not to misunderstand the syntax. The linked article confusingly has this example:<p><pre><code> input:checked ~ #main > #findMe
</code></pre>
… described thusly: “With the tilde character on #container input:checked would be able to target #findMe …”<p>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.)<p>Please also note that ~ does not select siblings; it selects <i>following</i> siblings.<p><pre><code> <i>italic</i> <a href="#">link</a> <b>bold</b>
</code></pre>
With the above HTML, the following selectors are NOT equivalent:<p><pre><code> i ~ b {
/* this will match the bold tag above */
}
b ~ i {
/* this will NOT match any elements in this example */
}</code></pre>