Focus-Within Card Highlight
:focus-within matches a parent element whenever any of its descendants has focus — ideal for highlighting form groups, nav items, or cards during keyboard navigation.
Quick implementation
/* Form card: highlights entire group on focus */
.form-group {
border: 2px solid var(--card-border);
border-radius: 0.5rem;
padding: 1rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-group:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 15%, transparent);
}
/* Also update child label color when group is focused */
.form-group:focus-within .form-label {
color: var(--accent);
}
/* Navigation item: highlight the whole row */
.nav-item {
border: 2px solid transparent;
border-radius: 0.5rem;
padding: 0.75rem 1rem;
transition: border-color 0.15s ease;
}
.nav-item:focus-within {
border-color: var(--accent);
background: color-mix(in oklch, var(--accent) 8%, transparent);
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are an accessibility-focused CSS developer. Implement :focus-within card highlighting for a form and navigation list.
Requirements:
1. Create a .form-group card that highlights its border and adds a glow when any child input receives focus. Use transition for smooth animation.
2. Also update a child .form-label's color to var(--accent) when the group is focused, using .form-group:focus-within .form-label.
3. Create a .nav-item row that highlights its border when a child link or button receives focus.
4. Keep individual :focus-visible rings on the inputs themselves — :focus-within highlights the parent, :focus-visible rings the focused element. Both should be visible simultaneously.
5. Use color-mix(in oklch, var(--accent) 15%, transparent) for the glow so it adapts to any accent color.
Constraints:
- :focus-within fires for ALL focus types including mouse. If you want keyboard-only parent highlighting, there is no CSS-only way — that requires JavaScript. Document this limitation.
- Do not remove :focus-visible from child elements — the parent highlight is supplementary, not a replacement.
- Ensure transitions use only opacity/color/border — not layout properties — to avoid reflow.
Output HTML + CSS for both patterns (form group and nav item).Why this matters in 2026
Keyboard navigation gives users a single focused element at a time, but the eye needs context to understand where in the page that element lives. :focus-within solves this by letting a parent container react to its child's focus state — the entire form card illuminates, making it clear which group the focused field belongs to. This is especially valuable in dense forms, sidebar navigation, and data tables where rows may contain multiple interactive elements.
The logic
:focus-within matches an element if it or any of its descendants currently has focus — it is essentially a bubbling focus state for CSS. This makes it ideal for styling parent containers based on child focus without JavaScript event listeners. One important caveat: unlike :focus-visible, which fires only for keyboard-triggered focus, :focus-within fires for all focus methods including mouse clicks. If you want keyboard-only parent highlights you will need JavaScript to add a class when focus events originate from the keyboard.
Accessibility & performance
The card highlight supplements — never replaces — the child element's own focus indicator. Screen reader users benefit from the visual grouping cue. The transition on border-color and box-shadow is GPU-composited and adds no layout cost. Respect @media (prefers-reduced-motion: reduce) if you add more dramatic transitions. The selector is universally supported across all modern browsers and has been for several years.