Как в CSS указать цвет родителю только если дочек 5?

Question

[Сергей Кореневский]

Имеется список <input type=checkbox/>.

Нужно родителю указать цвет зелёный если "чекнуто" (выбрано) дочерних только 5 "checkbox".

Comments

[Александр Васильев]

А как в css посчитать количество элементов?
Никак.

[Hovhannes Varosyan]

JavaScript

[Сергей Кореневский]

Hovhannes Varosyan, это и так понятно. Но вроде уже Counter`ы есть и всякие nth-child`ы, думал может какая нибудь комбинация есть

[Сергей Кореневский]

Hovhannes Varosyan, Александр Васильев , Telcontar , ну вот же 0xD34F ответил на чистом CSS
лузеры.

[0xD34F]

Сергей Кореневский, то, что так сделать можно, не значит, что так делать нужно. Очевидно же, что это говнокод.

[Сергей Кореневский]

0xD34F, согласен, что говнокод полный. Но это лучше чем JS.
Когда Вам нужно сделать сортировку данных а результат выгрузить обратно в файл, то нет мысла делать папку с константами языковой локализации, нет смысла соблюдать MVC, даже на продакшене лучше сделать говнокодом чем использовать JS, за которым нужно следить чтобы конфликтов не было или прочего.
И самое главное, в идеале на JS надо делать бизнес логику а не перекрашивать флажки. стилистически.

[Hovhannes Varosyan]

Сергей Кореневский, :has работает на браузерах 2022г >(я не знал что он и такое может). Если у вас нет вложения, и количество input только 5 (так как оно сработает если выбрано как минимум 5 а не ровно 5), то это сработает, и даже будет лучше чем решение на JS,

уже Counter`ы есть и всякие nth-child`ы

но нет if else, nth-childe используется для позиции а значение Counter можно вывести только в content , через JS легче считать количество checked, добавлять и удалить class

[Сергей Кореневский]

Hovhannes Varosyan, Вы правы, у меня действительно было много вложенных :HAS, мне пришлось
input[type=checkbox] повынимать из Label чтобы только один был :HAS.

Очень прошу Hovhannes Varosyan Александр Васильев 0xD34F поддержите мою идею голосом.
https://github.com/openui/open-ui/issues/1373

[Hovhannes Varosyan]

Сергей Кореневский, почему ты так не хочешь исползовать JS, у тега < a > предназначение навигация, то что ты хочешь легче делать через JS чем html, так быстрее, легче, большая поддержка старых браузеров, больше свободы, легче менять, а при SPA reload не будет

[Ankhena]

Александр Васильев,

А как в css посчитать количество элементов?
Никак.

counter этим занимается.
И даже if и else есть в css и даже уже местами с range синтаксисом.
Но проблема в том, что счетчик дает строку, а не число.
Возможно, это изменится в будущем. Ну или скорее заработает что-то типа calc(counter(checked-sum) + 0). Сейчас у меня не получился такой фокус.

Также есть sibling-index()
Но пока нет sibling-index(of ...)
И он дает число.
Сейчас можно только input[type="checkbox"]:checked, а это не поможет в сценарии автора.

Пишу это сейчас для тех, кто придёт в этот вопрос в будущем, потому что меняются сейчас такие вещи быстро.

А пока есть вот такая демка (не решающая конкретно эту задачу)
https://codepen.io/AnnaSummer/pen/gOEWQZW

Answer 1

[Ivan Ustûžanin]

можно упростить ответ 0xD34F, число указывается явно

селектор-родителя:has(> :nth-child(5 of :checked)) {
    color: green;
}