A Tasty Treats Podcast for Web Developers.

Ask a Potluck Question β†’
Wes Bos

Wes Bos

XL5G3 Full Stack JavaScript Developer. Creator of really good web development courses. BBQ enthusiast.

Scott Tolinski

Scott Tolinski

Web Developer, NX2V1, Creator of Level Up Tuts, Bboy, Robotops Crew and Youtuber

Playing: 470: I can has() new CSS Selector?!

0:00

LOUDNESS

Jun 13th, 2022

I can has() new CSS Selector?!

πŸ‘‡ Download Show✏️ Edit Show Notes

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

// 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 <p><a>Hi</a></p>
// would not find <p><span><a>hi</a></span></p>

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))

Tweet us your tasty treats