Как выделить у родителя ребёнка, и использовать селектор ~, чтобы выделить другой элемент?

Question

[Minat0_]

Здравствуйте!
Есть вёрстка вида:

<div>
  <div><input type="text"></div>
  <div><input type="text"></div>
  <button>Завершить регистрацию</button>
</div

Перемещать button не в коем случае нельзя.
Как можно написать css с селектором ~ (или любым другим), чтобы при input:focus – менялась кнопка?

Comments

[ниндзя оп оп]

родителя ребенка? серьезно? может родителя дочернего элемента? а то как то крипово звучит

[Minat0_]

Никита Корнеев, не мы такие, css такой ( ಠ ͜ʖ ಠ)

[Pavel-E-F]

С помощью css - никак. Ибо оба input в Вашем случае являются дочерними к своим div, а button, так сказать, братом к этим div.
Комбинации А + B и A ~ B работают только для селекторов у которых общий непосредственный родитель.
Выход:
1. Вынесите input из div и поставьте их перед button, поставьте им display:none. На их место в div поставьте label с for на эти input. Ну, и там в label нарисуйте чего-нибудь.
2. Или используйте javascript, в частности нужное событие.

Answer 1

[DanakayShorohov986]

В случае focus можете попробовать :focus-within

Пример

Comments

[Minat0_]

Я немного спутал: не focus, а valid...
Не могли бы подсказать?)
А то селектора valid-within я не нашёл (его и нет).

[DanakayShorohov986]

В таком случае я бы использовал js, прослушивал например change у input'a и добавлял класс к кнопке

Answer 2

[londhor]

Юзай tabindex

Answer 3

[Pavel-E-F]

С помощью css - никак. Ибо оба input в Вашем случае являются дочерними к своим div, а button, так сказать, братом к этим div.
Комбинации А + B и A ~ B работают только для селекторов у которых общий непосредственный родитель.
Выход:
1. Вынесите input из div и поставьте их перед button, поставьте им display:none. На их место в div поставьте label с for на эти input. Ну, и там в label нарисуйте чего-нибудь.
2. Или используйте javascript, в частности нужное событие.