CSS has been cranking out new features left and right recently and one of the coolest features to release recently has been the :has selector. This selector works like a parent selector in CSS, but it much more powerful than a simple parent selector. In this video I talk about how this selector works while also going into multiple advanced real world examples of why this selector is so useful.


Materials/References:

:has Selector Article: https://blog.webdevsimplified.com/2022-09/css-has-selector
Specificity Video: https://youtu.be/CHyPGSpIhSs
Specificity Article: https://blog.webdevsimplified.com/2020-02/css-specificity


Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00 - Introduction
00:32 - How :has works
03:36 - Real world example #1
05:15 - Real world example #2
06:51 - Real world example #3
09:06 - Advanced :has usage
11:49 - Browser Support


#CSS #WDS #CSSParentSelector