Fairly significant news: w3c/csswg-drafts#1027
UPDATED: May 31, 2018
The CSSWG has resolved 2 issues with :matches().
1. Matches uses the hierarchy of the entire document
The matches the behavior of :not, DOM matches, and querySelector.
Therefore, the following selector would match <body>:
head ~ :matches(html > body) {}And it would effectively expand to:
It would not expand to:
head ~ html > body {} /* WRONG */2. Matches uses the selector weight of the highest-weighted argument
This matches the behavior of :not and :nth-child(A of B). Therefore, the following selector would match <span class="foo bar"></span> with a weight of [1, 1, 0]:
.foo:matches(.bar, #qux) {}The id weight would apply and the class weight would not, despite the match being the opposite. This could not be expanded in any yet-known polyfill, whether at build time or live.
You would otherwise somehow need to do this:
- Encounter
:matches(.bar, #qux) and calculate its weight as [1, 0, 0].
- Match
<span class="foo bar"></span> using .foo.bar.
- Change the element and the selector to match the calculated weight
In HTML: <span class="foo bar" id="matches-bar"></span>
And CSS: .foo#matches-bar
Fairly significant news: w3c/csswg-drafts#1027
UPDATED: May 31, 2018
The CSSWG has resolved 2 issues with
:matches().1. Matches uses the hierarchy of the entire document
The matches the behavior of
:not, DOMmatches, andquerySelector.Therefore, the following selector would match
<body>:And it would effectively expand to:
It would not expand to:
2. Matches uses the selector weight of the highest-weighted argument
This matches the behavior of
:notand:nth-child(A of B). Therefore, the following selector would match<span class="foo bar"></span>with a weight of[1, 1, 0]:The id weight would apply and the class weight would not, despite the match being the opposite. This could not be expanded in any yet-known polyfill, whether at build time or live.
You would otherwise somehow need to do this:
:matches(.bar, #qux)and calculate its weight as[1, 0, 0].<span class="foo bar"></span>using.foo.bar.In HTML:
<span class="foo bar" id="matches-bar"></span>And CSS:
.foo#matches-bar