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
 
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.

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
 
ram12ka4 profile image
Ram Kumar Basak

nice article

Collapse
 
dailydevtips1 profile image
Chris Bongers

thank you dear Ram!

Collapse
 
alaindet profile image
Alain D'Ettorre

Very nice

Collapse
 
dailydevtips1 profile image
Chris Bongers

Thank you Alain!