I can has() new CSS Selector?!
source link: https://syntax.fm/show/470/i-can-has-new-css-selector
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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
- 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 <p><a>Hi</a></p>
// would not find <p><span><a>hi</a></span></p>
- 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))
Tweet us your tasty treats
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK