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.
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.
Top comments (20)
Yasss I love focus-within, I discovered one bug though. I usually use focus within to show the same state as hover so I use it like this:
On edge though, not only is focus-within not supported, but it actually breaks the hover state! 🤯
You have to add the hover on a separate line and shouldn’t use focus-within in combination with other selectors; as in comma separated on the same line.
Oh really. I didn't know about this but thanks for sharing it.
Is this not saas
This is such a cool psuedo element. Thanks for sharing. I will definitely be thinking of this in the future.
Awesome! Yes pleassse do...
Took me two reads to grasp it and its difference from :focus...Thanks for this, new knowledge acquired
+1 here, as well.
"knowledge acquired"... niccce!
Great! Happy you learned something new.
Yet? Yet⁉️
🤣
(Great post, thx)
CSS is coming up with such awesome pseudo-classes! There's a LOT to discover...thanks for sharing 😄
I know right I'm having fun discovering them :)
Awesome tip! I did know this existed.
This is lovely. Thanks
Another tool added to my repertoire
Great Post I will use it with the A11y compliance pin board
pin.it/9RGxxAi
I definitely have used :focus in the past but I didn't know this one could be used for a different approach, CSS still has many ways to teach us new stuff everyday! I love it.