Как обратится к предыдущему элементу css?

Question

[QnaTwitt]

Есть такой элемент:

<label>
    <input type="email" placeholder=" " name="email">
   <p>Email</p>
</label>

И когда срабатывает валидация добавляется снизу:
<span class="field-error">error.required</span>

Вот так получается:

<label>
    <input type="email" placeholder=" " name="email">
   <p>Email</p>
</label>
<span class="field-error">error.required</span>

Можно как-то добавлять к примеру красный бордер к label, если под ним есть "field-error"?

Answer 1

[xdevelx]

label:has(+ .field-error) {
  border: 2px solid red;
}

https://codepen.io/xdevelx/pen/wvXmqvz

Но нужно смотреть поддержку браузеров https://caniuse.com/css-has
Если не устроит, то js

Comments

[QnaTwitt]

Спасибо большой

Answer 2

[Сергей delphinpro]

Нет, нельзя.
Вам остаётся только поправить или настроить скрипт валидации.

Comments

[QnaTwitt]

Ок, понял. Спасибо