How to select elements that are not children of other elements in CSS (#snippet)

Today I came across a PR on MDN compatibility data that aims to update the CSS’s support information for the :not() pseudo-class.
MDN defines :not() as follows:

The :not() CSS pseudo-class represents elements that do not match a li…


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

Today I came across a PR on MDN compatibility data that aims to update the CSS's support information for the :not() pseudo-class.

MDN defines :not() as follows:

The :not() CSS pseudo-class represents elements that do not match a list of selectors.

And before diving into the latest browser additions let's have a look at some examples selectors using :not().

/* Select elements that are
   not paragraphs */
:not(p) { /* ... */ }

/* Select paragraphs that
   don't have the class "fancy" */
p:not(.fancy) { /* ... */ }

/* Select elements that are
   not p or span */
:not(p):not(span) { /* ... */ }

/* Select elements that are
   not p or span */
:not(p, span) { /* ... */ }

What changed is that the :not() pseudo-class now has cross-browser support for complex selectors in CSS. What's a complex selector and why is it exciting when using :not()? Read on!

A selector that matches elements that are not descendants of other elements

Section titled A selector that matches elements that are not descendants of other elements

I started reading the specification for CSS selectors. Reading specifications is never easy, but if you're curious the specification defines a complex selector as follows:

A complex selector is a sequence of one or more compound selectors separated by combinators.

I don't want to get into this topic here, but as far as I understand .foo .bar or div > span + .someClass are considered complex selectors (please correct me when I'm wrong).

What's exciting about supported complex selectors in :not() pseudo-classes is that it's possible to select elements that are not (!) children/descendants of other elements using the universal selector (*).

Let's say that you want to adopt image loading using the webp or avif format and want to select (and mark) all the img elements that are not children of a picture element, you can now do that! ?

In the example above, you see that the img element that is not a child of a picture element (and thus is not loading webp) is displayed with a red border.

Safari supports complex selectors in :not() since 2015, Firefox supports them since December 2020, and my Chrome just updated and now supports and the Chromiums with version v88, too.

That's a nifty trick I have to say!

Edit: Vincent De Oliveira pointed out that you can detect images that are not descendants of picture elements without a complext :not() selector: :not(picture) > img. And they're correct. Thanks for pointing that out!


Reply to Stefan


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis


Print Share Comment Cite Upload Translate
APA
Stefan Judis | Sciencx (2023-02-04T22:18:21+00:00) » How to select elements that are not children of other elements in CSS (#snippet). Retrieved from https://www.scien.cx/2021/01/26/how-to-select-elements-that-are-not-children-of-other-elements-in-css-snippet/.
MLA
" » How to select elements that are not children of other elements in CSS (#snippet)." Stefan Judis | Sciencx - Tuesday January 26, 2021, https://www.scien.cx/2021/01/26/how-to-select-elements-that-are-not-children-of-other-elements-in-css-snippet/
HARVARD
Stefan Judis | Sciencx Tuesday January 26, 2021 » How to select elements that are not children of other elements in CSS (#snippet)., viewed 2023-02-04T22:18:21+00:00,<https://www.scien.cx/2021/01/26/how-to-select-elements-that-are-not-children-of-other-elements-in-css-snippet/>
VANCOUVER
Stefan Judis | Sciencx - » How to select elements that are not children of other elements in CSS (#snippet). [Internet]. [Accessed 2023-02-04T22:18:21+00:00]. Available from: https://www.scien.cx/2021/01/26/how-to-select-elements-that-are-not-children-of-other-elements-in-css-snippet/
CHICAGO
" » How to select elements that are not children of other elements in CSS (#snippet)." Stefan Judis | Sciencx - Accessed 2023-02-04T22:18:21+00:00. https://www.scien.cx/2021/01/26/how-to-select-elements-that-are-not-children-of-other-elements-in-css-snippet/
IEEE
" » How to select elements that are not children of other elements in CSS (#snippet)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2021/01/26/how-to-select-elements-that-are-not-children-of-other-elements-in-css-snippet/. [Accessed: 2023-02-04T22:18:21+00:00]
rf:citation
» How to select elements that are not children of other elements in CSS (#snippet) | Stefan Judis | Sciencx | https://www.scien.cx/2021/01/26/how-to-select-elements-that-are-not-children-of-other-elements-in-css-snippet/ | 2023-02-04T22:18:21+00:00
https://github.com/addpipe/simple-recorderjs-demo