WebCraft

Home / Elements / state

:has()

A wrapper that knows its input is wrong

CaveatSpecificity is taken from the heaviest selector inside the brackets, not from :has() itself. Put an id in there and the whole rule inherits an id-level weight you did not intend to spend.

FallbackPair it with :user-invalid, never :invalid, or the wrapper is red before anyone has typed. Without :has() the field simply stays neutral.

CSS 
/* the parent selector we waited years for */
.field:has(input:user-invalid) {
  border-color: #e06c6c;
  background: rgba(224, 108, 108, .07);
}

Published