Как спрятать блок?

Question

[lavezzi1]

Есть инпуты и ошибки к ним, нужно чтобы при условии если инпут invaliad и untouched то скрыть блок с ошибками.
Делаю так, не работает. Как еще можно попробовать?

.invalid.untouched ~ .error {
    display: none;
}

<form class="form" novalidate>

    <div class="form__row">
        <input placeholder="Subject" class="textbox-input" id="subject" type="text" v-validate:subject="['required']">
    </div>

    <div class="form__row">
        <input placeholder="Enter your problem" class="textbox-input" id="description" type="text" v-validate:description="{ minlength: 1, maxlength: 256 }">
    </div>
    <div class="error">
         <p v-if="$validation.subject.required">Required your name.</p>
    </div>
</form>

Как называется этот символ ~ ?

Answer 1

[Сергей Протасов]

E ~ F { Описание правил стиля }
Для управления стилем родственных элементов используется символ тильды (~), он добавляется между двумя селекторами E и F. Пробелы вокруг тильды не обязательны. Стиль при такой записи применяется к элементу F в том случае, если он имеет того же родителя, что и элемент E и следует сразу после него.

HTML пришлите

Comments

[lavezzi1]

обновил ответ с html

[Сергей Протасов]

<form class="form" novalidate>

    <div class="form__row">
        <input placeholder="Subject" class="textbox-input" id="subject" type="text" v-validate:subject="['required']">
    </div>

    <div class="form__row invalid untouched">
        <input placeholder="Enter your problem" class="textbox-input" id="description" type="text" v-validate:description="{ minlength: 1, maxlength: 256 }">
    </div>
    <div class="error">
         <p v-if="$validation.subject.required">Required your name.</p>
    </div>
</form>

[Сергей Протасов]

работает