Applying CSS :focus-within

13 February 2020

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.

The :focus-within pseudo-class represents an element that is paired with the :focus pseudo-class or has a descendant that is matched by :focus.

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 :focus.

How is this different from :focus?

The :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-withinpseudo-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.

Applying :focus-within

: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 <input> fields.

Browser Support

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 :focus-within.

Can I use

Final Thoughts

The :focus-within element is an accessibility win for developers and users on the web. We should always keep it in mind while coding it's way better to reach for this than use JavaScript to accomplish the same task.

Resources

CSS Focus Within Spec

MDN Docs

CSS Tricks :focus-within


View All Posts šŸ”–

Subscribe to my Newsletter

Don't miss out on new articles from me. Get notified when a new article is published.


Hello! šŸ‘‹ Iā€™m Gift, a Frontend Engineer based in Lagos, Nigeria and I'm passionate about making the web accessible to everyone and building communities. I write content on HTML, CSS, Jamstack, Accessibility, and Career related topics.

If you find this article helpful consider sharing this post, connecting with me on Twitter or becoming a Patron.