loading...
Cover image for Applying CSS :focus-within

Applying CSS :focus-within

lauragift21 profile image Gift Egwuenu Originally published at giftegwuenu.com ・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.

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

Posted on by:

lauragift21 profile

Gift Egwuenu

@lauragift21

Frontend engineer based in Lagos Nigeria. I'm passionate about making the web accessible to everyone and also an advocate for building open-source software and developer communities.

Discussion

markdown guide
 

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.

 

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

 
 

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.

 

Great post!! Thanks for sharing!

 

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 :)

 

only IE browsers don't have support yet

Yet? Yet⁉️

🤣

(Great post, thx)

 

Nice! Thanks for spreading awareness.

 
 

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.

 

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

 

Awesome tip! I did know this existed.

 

How to insert the images in the post?

 

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.