CSS :has - Use JS Less and CSS More - 10 Real World Use Cases
Syntax Syntax
353K subscribers
3,498 views
0

 Published On Mar 12, 2024

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:   / 1737148340322652632  
Listen to Syntax episode 714: https://syntax.fm/show/714/css-has-in...

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

------------------------------------------------------------------------------
Hit us up on Socials!

http://www.syntax.fm/links

Brought to you by Sentry, use code tastytreats to get your first 2 months free: https://sentry.io/syntax/

#css #webdevelopment #javascript

show more

Share/Embed