Focus Visible

Only show focus styles for keyboard events.

/* default styles, progressive enhancement */
:focus {
  outline: 3px solid blue;
}

/* Hide focus styles if they're not needed, for example, 
when an element receives focus via the mouse. */
:focus:not(:focus-visible) {
  outline: 0;
}

/* Show focus styles on keyboard focus. */
:focus-visible {
  outline: 3px solid blue;
}

Preogressive

Focus Within

Selects a the form when one of its descendants is focused.

form:focus-within {
  background: #ff8;
  color: black;
}