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