{"id":333984,"date":"2021-02-05T13:02:30","date_gmt":"2021-02-05T21:02:30","guid":{"rendered":"https:\/\/css-tricks.com\/?p=333984"},"modified":"2021-04-15T08:44:56","modified_gmt":"2021-04-15T15:44:56","slug":"weekly-platform-news-the-not-pseudo-class-video-media-queries-clip-path-path-support","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/weekly-platform-news-the-not-pseudo-class-video-media-queries-clip-path-path-support\/","title":{"rendered":"Weekly Platform News: The :not() pseudo-class, Video Media Queries, clip-path: path() Support"},"content":{"rendered":"\n

Hey, we’re back with weekly updates<\/a> about the browser landscape from \u0160ime Vidas<\/a>.<\/p>\n\n\n\n

In this week’s update, the CSS :not<\/code> pseudo class can accept complex selectors, how to disable smooth scrolling when using “Find on page…” in Chrome, Safari’s support for there media<\/code> attribute on <video><\/code> elements, and the long-awaited debut of the path()<\/code> function for the CSS clip-path<\/code> property.<\/p>\n\n\n\n

Let’s jump into the news…<\/p>\n\n\n

The enhanced :not() pseudo-class enables new kinds of powerful selectors<\/h3>\n\n\n

After a years-long wait, the enhanced :not()<\/code> pseudo-class has finally shipped in Chrome and Firefox, and is now supported in all major browser engines<\/a>. This new version of :not()<\/code> accepts complex selectors<\/a> and even entire selector lists.<\/p>\n\n\n\n

For example, you can now select all <p><\/code> elements that are not<\/em> contained within an <article><\/code> element.<\/p>\n\n\n\n

\/* select all <p>s that are descendants of <article> *\/\narticle p {\n}\n\n\/* NEW! *\/\n\/* select all <p>s that are not descendants of <article> *\/\np:not(article *) {\n}<\/code><\/pre>\n\n\n\n
In another example, you may want to select the first list item that does not<\/em> have the hidden<\/code> attribute (or any other attribute, for that matter). The best selector for this task would be :nth-child(1 of :not([hidden]))<\/code>, but the of<\/code> notation is still only supported in Safari<\/a>. Luckily, this unsupported selector can now be re-written using only the enhanced :not()<\/code> pseudo-class.<\/p>\n\n\n\n
\/* select all non-hidden elements that are not preceded by a non-hidden sibling (i.e., select the first non-hidden child *\/\n:not([hidden]):not(:not([hidden]) ~ :not([hidden])) {\n}<\/code><\/pre>\n\n\n\n