Practical Use Cases for :has() Pseudo-Class

Find out how can :has() parent selector help you simplify your code and avoid JavaScript entirely on practical, real-life examples.

You'll learn how to use :has() pseudo-class to enhance form validation, draw attention to an element, and tweak overall page styling based on a specific state of an input element.

🎨 Codepen Demos

📚 Resources

📖 Chapters
00:00 Intro
00:30 Enhancing form validation
03:53 Highlighting elements
06:40 Page-wide tweaks
09:34 Conclusion

Subscribe to CSS Weekly Newsletter:

Keep up-to-date with CSS Weekly:

Keep up to date with what I'm up to:

- Zoran Jambor
#css

[AmplifyYourIncome]

Wow, mind blown... particularly the second example !

[vivgui]

I have been hearing about the :has() selector for a while now but this video show how powerful it can be!

[ScriptRaccoon]

These are really cool examples! I like in particular the second one, since it puts much more attention on the hovered element.

[LukaPeharda]

Noice! It never occurred to me to use it to de-emphasise elements that are not hovered (like in your 2nd example)