DEV Community

Cover image for Applying CSS :focus-within
Gift Egwuenu
Gift Egwuenu

Posted on • Originally published at giftegwuenu.com

Applying CSS :focus-within

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

Originally published on my blog

Discussion (21)

Collapse
cydstumpel profile image
Cyd

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:

.ul {
  &:focus-within, &:hover {
    // code to show sub nav or something
  }
}

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.

Collapse
lauragift21 profile image
Gift Egwuenu Author

Oh really. I didn't know about this but thanks for sharing it.

Collapse
junicodefire profile image
Okechukwu Obi

Is this not saas

Collapse
waylonwalker profile image
Waylon Walker

This is such a cool psuedo element. Thanks for sharing. I will definitely be thinking of this in the future.

Collapse
lauragift21 profile image
Gift Egwuenu Author

Awesome! Yes pleassse do...

Collapse
geekjs profile image
Vic-Orlands

Took me two reads to grasp it and its difference from :focus...Thanks for this, new knowledge acquired

Collapse
daveblythe profile image
Dave Blythe (he/him)

+1 here, as well.
"knowledge acquired"... niccce!

Collapse
lauragift21 profile image
Gift Egwuenu Author

Great! Happy you learned something new.

Collapse
tbroyer profile image
Thomas Broyer

only IE browsers don't have support yet

Yet? Yet⁉️

🤣

(Great post, thx)

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe

CSS is coming up with such awesome pseudo-classes! There's a LOT to discover...thanks for sharing 😄

Collapse
lauragift21 profile image
Gift Egwuenu Author

I know right I'm having fun discovering them :)

Collapse
yujiri8 profile image
Ryan Westlund

Nice! Thanks for spreading awareness.

Collapse
calvinoea profile image
Calvin

This is lovely. Thanks

Collapse
charbelsako profile image
Charbel Sarkis

Another tool added to my repertoire

Collapse
geraalcantara profile image
Gerardo Alcantara

Great Post I will use it with the A11y compliance pin board
pin.it/9RGxxAi

Collapse
junicodefire profile image
Okechukwu Obi

Very awesome gift ...I am definitely using this....and I though I know CSS at a high scale...lol

Collapse
bugsysailor profile image
Bugsy Sailor

Awesome tip! I did know this existed.

Collapse
driera_com profile image
Dani Riera

Great post!! Thanks for sharing!

Collapse
maxixor profile image
Maximiliano Ortiz

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.

Collapse
priyapareek635 profile image
Priya Pareek

How to insert the images in the post?

Collapse
priyapareek635 profile image
Priya Pareek

Thank you so much for your reply but my question is how to keep the screenshot of our explanation in our post which we are posting on this website.