Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

https://syntax.fm

claim!

report

I can has() new CSS Selector?!

In this Hasty Treat, Scott and Wes talk about new CSS selectors :has, :where, and :is.

MagicBell - Sponsor
MagicBell is the the notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months.
LogRocket - Sponsor
LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes

00:25 Welcome

01:19 Sponsor: MagicBell

02:31 Sponsor: LogRocket

03:40 Don’t say stupid

05:03 :Has

MDN :Has

// Finds all p tags that have an anchor tag as a child p:has(a) {} // Can find children of parent as well // Finds the button of a paragraph that contains an a tag p:has(a) button {} // Finds all p tags that don't have an anchor tag as a child p:not(:has(a)) {} // Finds all p tags where a is a direct sibling p:has(> a) {} // would find
Hi
// would not find
hi

06:13 Jargon check

11:01 Some examples

13:25 Nest navigations

13:51 Can I use it?

15:52 Is and Where

MDN :where

In the past we would write
header p:hover, main p:hover, footer p:hover { color: red; cursor: pointer; }
:where is essentially a short had for making this easier considering the 2nd half of these selectors is the same. Will make your css dryer
:where(header, main, footer) p:hover {}
Also super handy in avoiding css blocks being ignored for unsupported features.
// Doesn't work div:has(p), div:some_new_selector(p) // Will still work for :has if has is supported :where(div:has(p), div:some_new_selector(p))

When to use :Where

Tweet us your tasty treats

Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets

fyyd: Podcast Search Engine

June 13, 2022 25m