CSS: выберите тег, который является родителем родителя тега с классом, который я хочу

Question

В основном это то, что написано в банке.

У меня есть входной тег и независимый JavaScript для управления им.Когда пользователь вставляет данные, он автоматически меняет один из его классов так, что его цвет меняется с помощью CSS, который определен в другом месте. До этого все в порядке.Далее: я хочу, чтобы весь div, содержащий этот ввод, менял цвет, чтобы пользователь мог быть предупрежден, если что-то не так.Здесь есть проблема: как я могу выбрать тот div, который я хочу выбрать только с использованием CSS?Вот некоторый код, который работает для ввода:

input.wrongVal {
    border-color: red;
    background-color: red;
}
input.wrongVal:active{
    background-color: white;
}

Вот соответствующий код со страницы:

<div class="infoinputContainer">
    <p class="inputLine">
        <span>
            <input type="text" id="data">
            <label for="data">Data info</label>
        </span>

    </p>

</div>

Как я могу, только с CSS, выбрать для стилизации div, показанный здесь(и без другого div), например, с другим фоном?

Answer 1

Вы не можете.Не с чистым CSS.

Селекторы CSS только выбирают / предназначаются для дочерних элементов или потомков в целях производительности: если бы вы могли нацелиться на :parent (как в jQuery ), браузер должен был бы ждать, чтобы сделать любой страницы, пока она не обработала все дочерние узлы.

Вместо этого вам придется использовать JavaScript.

Answer 2

Вы не можете сделать это с помощью CSS.Однако вы можете использовать Javascript, чтобы изменить класс контейнера div или превратить контейнер div в другой div.

<div class="infoinputContainer invalid">
    <p class="inputLine">
        <span>
            <input type="text" id="data">
            <label for="data">Data info</label>
        </span>

    </p>
</div>

или:

<div class="invalidInput">
  <div class="infoinputContainer">
    <p class="inputLine">
        <span>
            <input type="text" id="data">
            <label for="data">Data info</label>
        </span>

    </p>
  </div>
</div>

Answer 3

Вы не можете просто css.

Что вы используете для изменения класса, когда пользователь вводит информацию? Если это javascript, вы также можете использовать его для изменения класса родителя (или деда).