Обнаружение нескольких отмеченных флажков

Question

Без использования JavaScript я хочу, чтобы что-то произошло, только если отмечены два флажка. Так что-то вроде

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

для

<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> 

, который, очевидно, не работает. Есть ли способ определить оба флажка без использования JS?

Answer 1

Да, это возможно.

Выберите второй флажок, если первый один проверяется, а затем оттуда выбрать 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>

Конечно, вы могли бы также обобщать селекторы, если вы этого не сделаете знать порядок заранее:

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>

Answer 2

Вы были близки, но то, что вам нужно:

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

Answer 3

Вам просто нужно изменить

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

в

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