How to Style a Parent Using a Pseudo Class

4min Snip

00:00

Play full episode

Summary

Transcript

Episode notes

Has is a pseudo class that matches if an el ment contains another selector. The most basic, barebones example of this is saying, let's say you wanted to style a paragraph,. You would say, p colon has, and then inside of parentheses, a. So what that saying is we're going to style this p tag if it has an anchor tag. And that we'll find all paragraph tags that have an anchor tag as a child. It can also be used with other unlike sibbling selectors and stuff in here too. In fact, this sounds complex, but we have the the code examples and the show notes. i have em examples along with some h t ml,

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

// would not find