Как в 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 не будет

Answer 1

[0xD34F]

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

Comments

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

круто, спасибо. Просто, и одновременно идеально. Новый сценарий привычных вещей теперь доступен.
Кто то написал выше что это говнокод, но это всё же бывает лучше чем писать логику стилистики на JS, в котором должна быть реализована бизнес логика. По максимуму очистить JS от стилей, пускай даже таким способом уже хорошо.

[0xD34F]

Сергей Кореневский, ничего идеального. Завтра окажется, что вместо пяти должно быть семь, через неделю - что таких блоков должно быть три, каждый со своим количеством. В отличие от js, где можно соорудить решение в общем виде, тут придётся тупо копипастить эти :checked столько раз, сколько должно быть отмечено чекбоксов для применения стилей.

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

0xD34F, Именно так я и делаю, я сразу понимал что надо сделать 7 копипастов.
Но тем не менее.

dialog:has( nav.films[data-max="1"] > :checked) + .btnRole::after,
dialog:has( nav.films[data-max="2"] > :checked ~ :checked) + .btnRole::after,
dialog:has( nav.films[data-max="3"] > :checked ~ :checked ~ :checked) + .btnRole::after,
dialog:has( nav.films[data-max="4"] > :checked ~ :checked ~ :checked ~ :checked) + .btnRole::after,
dialog:has( nav.films[data-max="5"] > :checked ~ :checked ~ :checked ~ :checked ~ :checked) + .btnRole::after,
dialog:has( nav.films[data-max="6"] > :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked) + .btnRole::after,
dialog:has( nav.films[data-max="7"] > :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked) + .btnRole::after{
}

Мне кажется что это короче написать чем писать тоже самое на JS , с циклами и обработчиками событий.
Разумеется тут нет универсальности и уже на 8 чекеров уже не подойдёт, но мне на самом деле и 5 хватит, просто 7 с запасом.
Опять таки когда требуется цвет менять на 5 чекеров, то кодить на JS с подписками на события излишне. Это как на такси ездить в булошную.
PS в коде есть список кнопок. По нажатию на кнопку выскакивает диалоговое окно со списком чекбоксов. В зависимости от того какое количество чекбоксов чекнуто, главная кнопка открытия этого диалогового окна должна подсветится. На каждое диалоговое окно есть лимит максимального выбранных чекбоксов, Как только лимит выбран, главная кнопка открытия диалогового окна должна отобразить флаг что в этом диалоге выбор закончен.