← Demo hub

:has() and :focus-within

Try: Tab into fields; type a bad email (leave invalid); click into the lower “section”.

Section with :focus-within

Click this paragraph or the input—parent gets an outline when anything inside is focused.

Source

<div class="field">
  <input type="email" required placeholder="…" />
</div>
<div class="section" tabindex="-1">
  <input type="text" />
</div>

.field:has(:focus-visible) {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.25);
}
.field:has(:invalid:not(:placeholder-shown)) {
  border-color: #dc2626;
}
.section:focus-within {
  outline: 2px solid #059669;
  outline-offset: 2px;
}
Support: :has() is Baseline. Form uses :invalid with :not(:placeholder-shown) so empty required field doesn’t scream red on load.