DEV Community

Cover image for Applying CSS :focus-within

Applying CSS :focus-within

Gift Egwuenu on February 13, 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...
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

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

Awesome! Yes pleassse do...

Collapse
 
mezieiv profile image
Chimezie Innocent

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

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

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

Collapse
 
bugsysailor profile image
Bugsy Sailor

Awesome tip! I did know this existed.

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
 
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
 
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
 
driera_com profile image
Dani Riera

Great post!! Thanks for sharing!

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.