Andrew's Digital Garden

:focus-visible-within

This [[css]] pseudo-selector doesn't exist, but you can make it with a combination of [[20210816101731-css-has]] and [[20220801121830-focus-visible]]. This is a different way of achieving a slightly different [[20220801122940-focus-within]]

Unlike :focus-within, this selector doesn't activate if the focus doesn't also meet focus-visible

.input-group:has(:focus-visible) { outline: 4px solid hotpink; }
Pseudo-class/selectorFocus targetOnly applied when focus is helpfulOnly applied when ancestor has focus
:focusElement in focusNoNo
:focus-withinAncestor element in focusNoYes
:focus-visibleElement in focusYesNo
:has(:focus-visible)Ancestor element in focusYesYes

https://larsmagnus.co/blog/focus-visible-within-the-missing-pseudo-class

:focus-visible-within