zhenyavka
@zhenyavka
Простой школьник, изучающий глубоководье IT.

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

Здравствуйте!
Есть вёрстка вида:
<div>
  <div><input type="text"></div>
  <div><input type="text"></div>
  <button>Завершить регистрацию</button>
</div

Перемещать button не в коем случае нельзя.
Как можно написать css с селектором ~ (или любым другим), чтобы при input:focus – менялась кнопка?
  • Вопрос задан
  • 56 просмотров
Решения вопроса 1
@DanakayShorohov986
В случае focus можете попробовать :focus-within

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы