470

June 13th, 2022 × #CSS#Web Development#Front End

I can has() new CSS Selector?!

Wes and Scott discuss new CSS selectors like has(), where() and is() that allow powerful new ways to select elements.

Wes Bos

Wes Bos Host

Scott Tolinski

Scott Tolinski Host

or
Show Notes Transcript

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

Share