DEV Community

Cover image for Why CSS :focus-within is amazing

Why CSS :focus-within is amazing

Chris Bongers on November 10, 2020

This is not a :focus selector, which will highlight when you focus on an element. But a selector to fire when something within is focussed. In our...
Collapse
 
nilsandrey profile image
Nils Andrey • • Edited

Great tip. I just like to add some precision in terms. focus-within is a pseudo-class. There're pseudo-classes and pseudo-elements, the selector is the full "query" part of the CSS rule.

  • A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the user's pointer hovers over it.
  • A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.

MDN: Pseudo-classes and pseudo-elements

Collapse
 
dailydevtips1 profile image
Chris Bongers •

100% correct on the terminology here.
Thanks for the addition

Collapse
 
iqbalmuhammad profile image
iqbal-muhammad •

Nice post... Thank you

Collapse
 
dailydevtips1 profile image
Chris Bongers •

Thanks! Hope you learned something new today

Collapse
 
itays profile image
Itay Sidis •

Thanks for the post!
not so related to the subject but I noticed the inputs has the same name.. prob a copy paste typo

Collapse
 
kyds3k profile image
Adam Darby •

Ohhh good catch!

Collapse
 
dailydevtips1 profile image
Chris Bongers •

Oh sharp eyes, copy-paste indeed haha

Collapse
 
alaindet profile image
Alain D'Ettorre •

Very nice

Collapse
 
dailydevtips1 profile image
Chris Bongers •

Thank you Alain!

Collapse
 
ram12ka4 profile image
Ram Kumar Basak •

nice article

Collapse
 
dailydevtips1 profile image
Chris Bongers •

thank you dear Ram!

Collapse
 
reythedev profile image
Rey van den Berg •

Another good one from the evergreen Chris!🙌

Collapse
 
dailydevtips1 profile image
Chris Bongers •

Thank you Rey!

Amazing CSS hack that can make our lives easier ✌️

Collapse
 
rahxuls profile image
Rahul •

Amzing post. Can this happen on hover too ?

Collapse
 
dailydevtips1 profile image
Chris Bongers •

Thanks Rahul,

I do think you can change this with a hover and then use "focus-within"

Collapse
 
amarta profile image
Amarta Dey⚡ •

Thank you... will definitly use it next time

Collapse
 
dailydevtips1 profile image
Chris Bongers •

Your welcome Amarta, looking forward to see what you'll make with it.