In this Hasty Treat, Scott and Wes talk about new CSS selectors :has, :where, and :is. <a id= "MagicBell__Sponsor_2" name="MagicBell__Sponsor_2"></a>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 - <a href="https://www.magicbell.com">use the coupon code SYNTAXFM for 10% off the first 12 months</a>. <a id= "LogRocket__Sponsor_6" name="LogRocket__Sponsor_6"></a>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 <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>. <a id="Show_Notes_10" name="Show_Notes_10"></a>Show Notes <ul> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=00:25">00:25</a> Welcome</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="#t=01:19">01:19</a> Sponsor: MagicBell</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=02:31">02:31</a> Sponsor: LogRocket</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="#t=03:40">03:40</a> Don’t say stupid</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=05:03">05:03</a> :Has</li> <li class="has-line-data" data-line-start="17" data-line-end="19"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has">MDN :Has</a></li> </ul> // 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 <a>Hi</a> // would not find <a>hi</a> <ul> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href="#t=06:13">06:13</a> Jargon check</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="#t=11:01">11:01</a> Some examples</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href="#t=13:25">13:25</a> Nest navigations</li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="#t=13:51">13:51</a> Can I use it?</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <a href="#t=15:52">15:52</a> Is and Where</li> <li class="has-line-data" data-line-start="38" data-line-end="40"> <a href= "https://developer.mozilla.org/en-US/docs/Web/CSS/:where">MDN :where</a></li> </ul> 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)) <ul> <li class="has-line-data" data-line-start="67" data-line-end="69"> <a href= "https://developer.mozilla.org/en-US/docs/Web/CSS/:where#examples">When to use :Where</a></li> </ul> <a id="Tweet_us_your_tasty_treats_69" name= "Tweet_us_your_tasty_treats_69"></a>Tweet us your tasty treats <ul> <li class="has-line-data" data-line-start="71" data-line-end="72"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="72" data-line-end="73"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="73" data-line-end="74"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="74" data-line-end="75"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="75" data-line-end="76"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="76" data-line-end="77"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="77" data-line-end="78"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

Podurama

Home

Trending

Personal

Your Podcasts

New Episodes

My Files

Favourite Episodes

Tags (Folders)

Recently Played

Bookmarks

Followed Playlists

I can has() new CSS Selector?!

Syntax - Tasty Web Development Treats