Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

:not() missing complex selector list examples #32880

Closed
marcustyphoon opened this issue Mar 29, 2024 · 0 comments · Fixed by #34405
Closed

:not() missing complex selector list examples #32880

marcustyphoon opened this issue Mar 29, 2024 · 0 comments · Fixed by #34405
Labels
Content:CSS Cascading Style Sheets docs goal: completeness (Experiment label) Issues about content missing important/relevant details. help wanted If you know something about this topic, we would love your help!

Comments

@marcustyphoon
Copy link
Contributor

marcustyphoon commented Mar 29, 2024

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

What specific section or headline is this issue about?

Description, examples

What information was incorrect, unhelpful, or incomplete?

There are no examples demonstrating—and no description suggesting, confirming, or denying, unless the reader looks up the technical definition of <complex-selector-list>—that the contents of :not() may include compound selectors, i.e. multiple selectors combined by combinators. The description paragraph, if anything, loosely implies that one may not do this: body :not(table) a is noted as a selector that does not work as the developer intended, but the corrected variant a:not(table *)/a:not(table a) is not listed, implying the selector may not be useful in this case.

There is a significant amount of text devoted to interactions with :is(), but not this simple CSS4 variant which became widely available at about the same time.

This contrasts, for example, with the documentation for :is(). Due to this contrast, I incorrectly assumed for a long time that :not() only accepted lists of single selectors.

What did you expect to see?

At least one paragraph about this in the description section, and at least one example of e.g. :not(a b), :not(a + b), :not(a ~ b), etc.

I'm not sure if there are performance implications of making a selector with extremely complex invalidation requirements using this; if so it would be ideal to mention that too. This also applies to :is() and :has(), of course, whose pages have no such disclaimer, so I don't see this as a requirement at all.

Do you have any supporting links, references, or citations?

I could find none; my guess is that the lack of example here has resulted in a lack of documentation/examples elsewhere.

Do you have anything more you want to share?

I did confirm that Chrome 88 and Firefox 84 correctly render a simple document with a p:not(.a *) selector, and thus the compatibility data appears to be entirely correct and its "Selector list argument" line does include complex selectors (rather than e.g. only supporting :not(.a, .b, .c)).

MDN metadata

Page report details
@marcustyphoon marcustyphoon added the needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. label Mar 29, 2024
@github-actions github-actions bot added the Content:CSS Cascading Style Sheets docs label Mar 29, 2024
@Josh-Cena Josh-Cena added help wanted If you know something about this topic, we would love your help! goal: completeness (Experiment label) Issues about content missing important/relevant details. and removed needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. labels Jun 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Content:CSS Cascading Style Sheets docs goal: completeness (Experiment label) Issues about content missing important/relevant details. help wanted If you know something about this topic, we would love your help!
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants