CSS :has - Use JS Less and CSS More - 10 Real World Use Cases

CSS :has, also known as the parent selector, allows us to select elements based on their contents or siblings. In this video, CJ shows 10 places where you can start using CSS :has today.

View the examples here: https://has.syntax.fm View the code here: https://github.com/syntaxfm/css-has

00:00 Intro
00:14 Where to find these examples
00:40 The Basics
01:21 Anywhere Selector #1
02:46 Anywhere Selector #2
03:41 Previous Element
04:13 Target Layouts
05:05 Form Validation
07:42 All Siblings
08:26 Quantity Queries
08:59 Empty Children
09:29 Nested Dropdowns
10:21 Attribute Matching
10:56 Where to find these examples
11:07 Thanks!

View Wes' Tweet here: https://twitter.com/wesbos/status/1737148340322652632 Listen to Syntax episode 714: https://syntax.fm/show/714/css-has-in-every-browser-10-uses

Learn more about :has() on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/:has