Detecting Multiple Checked Flags

Question

Without using JavaScript, I want something to happen only when checking two checkboxes. So something like

#one:checked && #two:checked ~ p {
    color: red;
}

for

<input id="one" type="checkbox" name="check"><label for="one">One</label>
<input id="two" type="checkbox" name="check"><label for="two">Two</label>
<p>Thing</p>

which obviously does not work. Is there a way to define both checkboxes without using JS?

Answer 1

Yes it is possible.

Select the second check box if the first check box is selected, and then select the item p:

#one:checked ~ #two:checked ~ p {
  color: #f00;
}

<input id="one" type="checkbox" name="check"><label for="one">One</label>
<input id="two" type="checkbox" name="check"><label for="two">Two</label>
<p>Thing</p>

Run codeHide result

Of course, you can also generalize selectors if you don't know the order in advance:

input:checked ~ input:checked ~ p {
  color: #f00;
}

<input id="one" type="checkbox" name="check"><label for="one">One</label>
<input id="two" type="checkbox" name="check"><label for="two">Two</label>
<p>Thing</p>

Run codeHide result

Answer 2

You were close, but you need:

#one:checked ~ #two:checked ~ p {
    color: red;
}

Answer 3

#one:checked && #two:checked ~ p {
    color: red;
}

#one:checked ~ #two:checked ~ p {
    color: red;
}