:focus, :focus-within and :focus-visible
samundrak
JavaScript DevI was pretty known with the :focus pseudo-class and was recently playing with it while doing some work that was related
to keyboard navigation and interaction. As I was learning more about it I found 2 new interesting pseudo-classes.
which are :focus-within and :focus-visible. Just to make some Context :focus is a pseudo-class that is applied when any focusable
input is in focus. For example when we hit the tab key and if it
goes into input then we can see some kind of indication that
this element is in focus now. But the problem here is if we want to apply
some style if the element is on focus but only if it was
done by keyboard or mouse then we can't do that with just :focus.
Here, we can do that by :focus-visible.
As per mdn docs, :focus-visible is a pseudo-class that is applied when an element matches the :focus pseudo-class and
the user agent determines via heuristics that the focus should be made evident on the element. We can use this pseudo-class whenever
we want to apply some style when the element is in the focus but only when it was tabbed via the keyboard as we may not want to focus style
when the button is clicked by the mouse.
Example
Whereas :focus-within is a pseudo-class that can be used to apply style whenever an element or its descendent is in the focus state.
One of the use cases of this pseudo-class can be if we want to highlight the form when any one input is on the focused state just to give a hint
to the user that this form is actively in use.
As of now :focus-visible is not much supported by many modern browsers. To use this we can use
npm module `what input.