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

Question

[SHKD]

Приветствую, bootstrap5 поле пароля с валидацией формы. Добавил возможность посмотреть/скрыть пароль, но при прохождении валидации рамка импута становится красной а рамка с иконкой нет.

<div class="mb-3">
                <label for="password" class="form-label fw-bold">Придумайте пароль</label>
                <div class="input-group password-group">
                  <input type="password" name="password" id="password" class="password-control form-control[[!+reg.error.password:notempty=` is-invalid`]]" value="[[!+reg.password]]">
                  <span class="input-group-text"><a href="#" class="btn-view" onclick="return show_hide_password(this);"></a></span>
                </div>
                <div class="invalid-feedback">[[!+reg.error.password]]</div>
              </div>

Как сделать так что как только к password-control добавляется класс is-invalid, то input-group-text принимает стиль border: 1px solid #dc3545 !important;?

Answer 1

[Ankhena]

Если span после инпута, то это вообще основы CSS
.is-invalid + .input-group-text

Если бы наоборот, то
:has
Либо добавляя класс к инпуту добавлять и спану.

p.s. пересмотрите стили, чтобы обойтись без !important