Селекторы CSS. Вёрстку изменять нельзя. Как найти нужный элемент?

Question

[LaCosteGreen]

Добрый день! Помогите найти нужный селектор...
С помощью CSS хочу сделать неактивную кнопку, но при выборе любого радио чтобы она становилась активной.
HTML:

<div class="main">
        Question 1
        <div class="inputG">
            <input class="input" type=radio name='one'>
            <input class="input" type=radio name='one'>
            <input class="input" type=radio name='one'>
        </div>
        <div class="wrap">
            <button class="button">Next</button>
        </div>
</div>

CSS:
.button {
pointer-events: none;
opacity: 0.5;
user-select: none;
}
Проблема с этим селектором:
.inputG .input:checked ~ .wrap .button {
pointer-events: unset;
opacity: 1;
}

Если убираю обертку inputG - всё работает, но вёрстку нельзя поменять...

Comments

[LaCosteGreen]

https://codepen.io/LaCosteGreen/pen/xxMzBLp

[alexalexes]

Судя по форме задачи, вы не должны переносить логику работы формы на CSS, это нужно решать JS методом в момент инициализации страницы или формы - задавать нужные начальные состояния элементов.

Answer 1

[Алексей Ярков]

Можете использовать :has, но там вроде с поддержкой браузерами ещё не всё ОК

.button {
  pointer-events: none;
  opacity: 0.5;
  user-select: none;
}

.inputG:has(.input:checked) ~ .wrap .button {
  pointer-events: unset;
  opacity: 1;
}

Comments

[LaCosteGreen]

Огромное спасибо! Решает мою проблему, но если есть вариант с более высокой поддержкой было бы супер!

[Алексей Ярков]

LaCosteGreen, сомневаюсь что есть вариант на CSS

[Сергей delphinpro]

LaCosteGreen, Это единственный вариант на CSS
Не работает в firefox вообще и в сафари версиях до 2022 года
Учитывая, что это решение влияет на функциональность, а не просто украшательство, лучше сделать на javascript, или все-таки поменять верстку.

[Rsa97]

Сергей delphinpro, В Firefox работает, если включить флаг layout.css.has-selector.enabled в about:config

[Сергей delphinpro]

Rsa97, да. но каждого пользователя сайта не попросишь включить флаг