Applying CSS :focus-within
/ 2 min read
In my quest to learn something new every week. I came across a not so new pseudo-class element :focus-within. Let’s take a look at how it works and how to apply it to our styles.
:focus-within pseudo-class represents an element that is paired with the
:focus pseudo-class or has a descendant that is matched by
NB: the focus here means when you click, tap or tab through an element such as a form input or a link.
I like how Chris Coyier explains it in simple terms:
It selects an element if that element contains any children that have
How is this different from
:focus pseudo-element works differently, an element receives focus when the
:focus element is applied to it, but, in a case when you have a collection of child elements it is not common to use
:focus pseudo-class to select the parent element. The
:focus pseudo-class applies only to the focused element itself.
This is what
:focus-within is able to solve. We can use
:focus-within pseudo-class if we want to select an element that contains a focused element or elements that has descendants matched by
:focus. Let’s see how to achieve that.
:focus-within is useful for different use-cases. You can think of using it:
- To highlight an entire form when one of its input fields is in focus.
- Highlight rows of a table and change the background color when a user clicks on it.
Here’s an example, for highlighting an entire
<form> container when the user focuses on one of its
As of 2020, This CSS feature is widely supported only IE browsers don’t have support yet. Here’s a table of current browser that fully supports