Even better - do it semantically instead of classes:
<div>
<input aria-invalid={error} />
<div class="error">You have an error</div>
</div>
And in CSS:
.error { display: hidden }
input:invalid {
background: red;
& + .error, &[aria-invalid] + .error { display: block }
}






















