support compound selectors and complex selectors within :not() negation pseudo-class
Categories
(Core :: CSS Parsing and Computation, enhancement)
Tracking
()
People
(Reporter: lucas, Assigned: emilio)
References
(Blocks 2 open bugs, )
Details
(Keywords: dev-doc-complete, parity-safari)
Attachments
(2 files)
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:24.0) Gecko/20100101 Firefox/24.0 (Beta/Release)
Build ID: 20130910160258
Steps to reproduce:
Created a simple CSS selector using an element and a class inside a :not(). It seems to work fine if the :not() contains only a single element or class, but fails when they're combined.
Actual results:
got this in the console:
Timestamp: 2013-11-01 12:02:58
Warning: Missing closing ')' in negation pseudo-class '.'. Ruleset ignored due to bad selector.
Source File: ***/not%20bug.html
Line: 6, Column: 9
Source Code:
:not(p.foo) {
Expected results:
rule parsed and style applied
|
||
Comment 1•11 years ago
|
||
We don't yet support compound selectors like "p.foo" inside :not(). CSS Selectors Level 3 allows only simple selectors (like "p" or ".foo" but not both together), while Level 4 relaxes this restriction. http://dev.w3.org/csswg/selectors3/#negation http://dev.w3.org/csswg/selectors4/#negation
Thanks. Sorry about the **** summary. Looks like the one I wrote reverted to the search terms I began with.
|
||
Updated•9 years ago
|
|
||
Updated•8 years ago
|
|
||
Updated•7 years ago
|
|
||
Comment 5•6 years ago
|
||
Mass bug change to replace various 'parity' whiteboard flags with the new canonical keywords. (See bug 1443764 comment 13.)
|
||
Comment 6•6 years ago
|
||
From bug 1348802: > We should downgrade to level 3 and then reconsider after stylo ships. I have a patch. Time to reconsider?
|
Assignee | |
Comment 7•6 years ago
|
||
(In reply to Dão Gottwald [::dao] from comment #6) > From bug 1348802: > > We should downgrade to level 3 and then reconsider after stylo ships. I have a patch. > > Time to reconsider? This is not so easy fwiw, Servo's implementation had no invalidation support whatsoever. Compound selectors are easy to implement, combinators... not so.
(In reply to Emilio Cobos Álvarez (:emilio) from comment #7) > (In reply to Dão Gottwald [::dao] from comment #6) > > From bug 1348802: > > > We should downgrade to level 3 and then reconsider after stylo ships. I have a patch. > > > > Time to reconsider? > > This is not so easy fwiw, Servo's implementation had no invalidation support > whatsoever. Compound selectors are easy to implement, combinators... not so. Well, selector list invalidation is going away inside `:is(…)`, `:where(…)`, `:not(…)` and other Level 4 and higher selectors that take a selector list as an argument in https://github.com/w3c/csswg-drafts/issues/3264.
|
|
Assignee | |
Comment 9•6 years ago
|
||
(In reply to ExE Boss from comment #8) > Well, selector list invalidation is going away inside `:is(…)`, `:where(…)`, > `:not(…)` and other Level 4 and higher selectors that take a selector list > as an argument in https://github.com/w3c/csswg-drafts/issues/3264. I'm not talking about that invalidation. I'm talking about restyling, that is, making sure that we restyle as little as possible when for example a class changes in a selector like: .foo bar:not(.bar + baz) Handling the .bar change is non-trivial.
|
|
Assignee | |
Comment 13•4 years ago
|
||
This fixes the failures this bug is about and should just work with the
invalidation improvements I did for :is / :where.
It seems Chromium is adding tests for that1 so I'll wait for those
before landing and ensure they pass.
|
||
Updated•4 years ago
|
|
|
Assignee | |
Comment 14•4 years ago
|
||
|
||
Comment 15•4 years ago
|
||
Pushed by ealvarez@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/fd29ba131d13 Implement complex :not(). r=jfkthame
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/26330 for changes under testing/web-platform/tests
|
|
||
Comment 17•4 years ago
|
||
Pushed by emilio@crisal.io: https://hg.mozilla.org/integration/autoland/rev/4ae6c523d160 Annotate a few tests that have landed in the meantime.
|
||
Comment 18•4 years ago
|
||
| bugherder | ||
https://hg.mozilla.org/mozilla-central/rev/fd29ba131d13
https://hg.mozilla.org/mozilla-central/rev/4ae6c523d160
Upstream PR merged by moz-wptsync-bot
|
||
Comment 20•4 years ago
|
||
Added to release notes, updated BCD and example on MDN property page.
|
||
Comment 21•4 years ago
|
||
Release Note Request (optional, but appreciated)
[Why is this notable]: Very convenient new CSS feature
[Affects Firefox for Android]: yes
[Suggested wording]: :not CSS selector now supports selector lists and more complex selectors
[Links (documentation, blog post, etc)]: https://caniuse.com/css-not-sel-list
here's the MDN page: https://developer.mozilla.org/en-US/docs/Web/CSS/:not (compat data needs updating for FF 84)
tldr: :not(X):not(Y):not(Z) or :not(:is(X,Y,Z)) can now be :not(X, Y, Z)
|
|
Assignee | |
Comment 22•4 years ago
|
||
(In reply to Tim Nguyen :ntim from comment #21)
tldr:
:not(X):not(Y):not(Z)or:not(:is(X,Y,Z))can now be:not(X, Y, Z)
:not(x):not(y) is not equivalent to :not(x, y) afaict.
If you match x but not y, then one applies but other doesn't.
|
|
||
Comment 23•4 years ago
|
||
(In reply to Emilio Cobos Álvarez (:emilio) from comment #22)
(In reply to Tim Nguyen :ntim from comment #21)
tldr:
:not(X):not(Y):not(Z)or:not(:is(X,Y,Z))can now be:not(X, Y, Z):not(x):not(y) is not equivalent to :not(x, y) afaict.
If you match x but not y, then one applies but other doesn't.
I struggle to make sense of this. From what I remember we've been using :not(foo):not(bar) and :not(:is(foo, bar)) interchangeably. https://caniuse.com/css-not-sel-list also states that:
:not(a):not(.b):not([c])can instead be written as:not(a, .b, [c])
These are equivalent from what I can tell:
<style>
#a :not(:disabled):not(:hover),
#b :not(:is(:disabled, :hover)),
#c :not(:disabled, :hover) {
outline: 1px solid red;
}
</style>
<p id="a">
<input type="button" disabled>
<input type="button">
</p>
<p id="b">
<input type="button" disabled>
<input type="button">
</p>
<p id="c">
<input type="button" disabled>
<input type="button">
</p>
|
|
Assignee | |
Comment 24•4 years ago
|
||
Err, yeah, I got that wrong, sorry.
They are in fact equivalent, because :not(a):not(b) is effectively !a && !b, and :not(a, b) or :not(:is(a, b)) is just !(a || b), which is the same, that is, will only really match when both are false.
|
||
Comment 26•3 years ago
|
||
We generally don't add feature like this to the general release notes. MDN is the right place for it.
Description
•