Selecting Multiple General Siblings of Elements Within Separate Div's - html

Question

I know can control the display of a single class by using the following CSS:
.some-random-class{
display: none;
}
input[type=checkbox]:checked ~ .some-random-class{
display: flex;
}
I understand that this code controls the display of any object with the class of "some-random-class" that is a sibling of whatever checkbox is checked. If I have 3 classes I want to control the display of, I can do so with 3 separate input "functions" addressing each class individually. What I can't quite seem to figure out is how to control multiple classes in with the same "function" and control classes that are not in the same generation as in the following HTML:
<div>
<input type="checkbox">
<div class="first-class">
stuff to hide
</div>
<div class="second-class">
stuff to hide
<input type="checkbox">
<div class="third-class">
stuff to hide
</div>
</div>
</div>
When I try to control all three using what I think logically should work, it breaks the whole thing.
The following CSS is what I thought SHOULD work, however doesn't:
input[type=checkbox]:checked ~ .first-class ~ .second-class ~ .third-class {
display: flex;
}
Is this even possible, or am I asking too much of CSS?
If what I want to accomplish is possible, what am I not understanding about the above function?

Answer 1

You need to separate each rule with , , not just concatenate them with ~, because that only can select a single element.
input[type=checkbox]:checked ~ .first-class,
input[type=checkbox]:checked ~ .second-class,
input[type=checkbox]:checked ~ .third-class {
color: red;
}
input[type=checkbox]:checked ~ .third-class {
color: blue;
}
<div>
<input type="checkbox">
<div class="first-class">
stuff to hide
</div>
<div class="second-class">
stuff to hide
<input type="checkbox">
<div class="third-class">
stuff to hide
</div>
</div>
</div>