Parent Reaction to Child

Regular :focus only works with the element you clicked on. But what if we want to highlight the entire product card when user types in its input field? Here :focus-within comes to help.

How It Works?

This pseudo-class triggers on an element if focus is located either on it itself, or on any of its descendants.

/* Highlight entire form blue when any field inside is active */
form:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 10px rgba(0,0,255,0.1);
}