I don't understand the ~ * css selectors combination

Question

I am trying to reconstruct the 'Toggling elements with a hidden checkbox' code by myself, but I don't understand the selectors syntax:

#expand-toggle:checked ~ * .expandable {visibility: visible;}

Why we need both ~ and *?

Why using just the ~ selector is not enough?

Thank you

You will definitely find your answer in the documentation. Also check out this post: https://stackoverflow.com/questions/10782054/what-does-the-tilde-squiggle-twiddle-css-selector-mean — Bouramas, Oct 09 '20 at 06:53

score 1 · Answer 1 · answered Oct 10 '20 at 15:11

Let's review the HTML for that sample:

<input type="checkbox" id="expand-toggle" />

<table>
  <thead>
    <tr><th>Column #1</th><th>Column #2</th><th>Column #3</th></tr>
  </thead>
  <tbody>
    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
    <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
    <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
  </tbody>
</table>

<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label>

Recall that the ~ combinator is a sibling combinator. If the selector were to read #expand-toggle:checked ~ .expandable, that would require the .expandable element to follow after the checkbox but not within some other element. In this case, .expandable is a tr within a table. That table is a sibling of the checkbox.

Perhaps swapping the * for a table would make the selector clearer:

#expand-toggle:checked ~ table .expandable {
  visibility: visible;
}

Either one could be used; I'm guessing the author went with * to save space — evidently, at the cost of readability.

I don't understand the ~ * css selectors combination

1 Answers1