Коротко — чисто на CSS это в общем случае сделать нельзя. CSS не умеет «посчитать» произвольное количество отмеченных чекбоксов и на основании этого стилизовать родителя. Селектор :has() позволяет проверить наличие/отсутствие определённых потомков (и в некоторых ограниченных сценариях — комбинации), но не «ровно N отмеченных в произвольном порядке».
Реалистичное решение — JavaScript: при изменении считайте количество checked и ставьте/убирайте класс у родителя. Пример:
HTML:
<div class="group">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div>
CSS:
.group.five-checked { background: #c8f7c5; /* зелёный фон */ }
JavaScript:
document.querySelectorAll('.group').forEach(group => {
const update = () => {
const count = group.querySelectorAll('input[type="checkbox"]:checked').length;
group.classList.toggle('five-checked', count === 5);
};
group.addEventListener('change', update); // ловим изменение чекбоксов
update(); // начальная проверка
});
Пояснения и альтернативы:
- Если у вас фиксированная позиционная структура (например, только 5 первых чекбоксов вообще могут быть отмечены) — с :has() можно проверять конкретные позиции, но это не решит общую задачу «любые 5 из N».
- :has() пока поддерживается не во всех старых браузерах (современные Chrome, Edge, Safari — да).
- JS-решение крошечное и надёжное, поэтому рекомендуется его использовать.
Если нужно — могу адаптировать пример под вашу конкретную разметку (несколько групп, label-ы, динамическое добавление чекбоксов и т. п.).