mirror of https://github.com/sveltejs/svelte
fix: use hybrid scoping strategy for consistent specificity increase (#10443)
* end the specificity wars * tweaks * document breaking change * blurgh --------- Co-authored-by: Rich Harris <rich.harris@vercel.com>pull/10434/head
parent
5dd9951cb6
commit
999fca97cf
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: use hybrid scoping strategy for consistent specificity increase
|
@ -1,7 +1,7 @@
|
||||
main.svelte-xyz button.svelte-xyz.svelte-xyz {
|
||||
main.svelte-xyz button:where(.svelte-xyz) {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
main.svelte-xyz div.svelte-xyz > button.svelte-xyz {
|
||||
main.svelte-xyz div:where(.svelte-xyz) > button:where(.svelte-xyz) {
|
||||
background-color: blue;
|
||||
}
|
||||
|
@ -1,3 +1,3 @@
|
||||
.test.svelte-xyz > div.svelte-xyz {
|
||||
.test.svelte-xyz > div:where(.svelte-xyz) {
|
||||
color: #0af;
|
||||
}
|
||||
|
@ -1,3 +1,3 @@
|
||||
p.svelte-xyz span.svelte-xyz {
|
||||
p.svelte-xyz span:where(.svelte-xyz) {
|
||||
color: red;
|
||||
}
|
||||
|
@ -1,18 +1,18 @@
|
||||
div.svelte-xyz.svelte-xyz.svelte-xyz {
|
||||
div.svelte-xyz {
|
||||
color: red;
|
||||
}
|
||||
h2.svelte-xyz > p.svelte-xyz.svelte-xyz {
|
||||
h2.svelte-xyz > p:where(.svelte-xyz) {
|
||||
color: red;
|
||||
}
|
||||
h2.svelte-xyz span.svelte-xyz.svelte-xyz {
|
||||
h2.svelte-xyz span:where(.svelte-xyz) {
|
||||
color: red;
|
||||
}
|
||||
h2.svelte-xyz > span.svelte-xyz > b.svelte-xyz {
|
||||
h2.svelte-xyz > span:where(.svelte-xyz) > b:where(.svelte-xyz) {
|
||||
color: red;
|
||||
}
|
||||
h2.svelte-xyz span b.svelte-xyz.svelte-xyz {
|
||||
h2.svelte-xyz span b:where(.svelte-xyz) {
|
||||
color: red;
|
||||
}
|
||||
h2.svelte-xyz b.svelte-xyz.svelte-xyz {
|
||||
h2.svelte-xyz b:where(.svelte-xyz) {
|
||||
color: red;
|
||||
}
|
||||
|
@ -1,13 +1,13 @@
|
||||
.a.svelte-xyz ~ .b.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz ~ .c.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz ~ .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz ~ .e.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz ~ .f.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz ~ .g.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz ~ .h.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz ~ .b:where(.svelte-xyz) { color: green; }
|
||||
.a.svelte-xyz ~ .c:where(.svelte-xyz) { color: green; }
|
||||
.a.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
|
||||
.a.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
|
||||
.a.svelte-xyz ~ .f:where(.svelte-xyz) { color: green; }
|
||||
.a.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; }
|
||||
.a.svelte-xyz ~ .h:where(.svelte-xyz) { color: green; }
|
||||
|
||||
.b.svelte-xyz ~ .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.c.svelte-xyz ~ .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.b.svelte-xyz ~ .e.svelte-xyz ~ .f.svelte-xyz ~ .h.svelte-xyz { color: green; }
|
||||
.b.svelte-xyz ~ .d.svelte-xyz ~ .h.svelte-xyz.svelte-xyz { color: green; }
|
||||
.c.svelte-xyz ~ .g.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.b.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
|
||||
.c.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
|
||||
.b.svelte-xyz ~ .e:where(.svelte-xyz) ~ .f:where(.svelte-xyz) ~ .h:where(.svelte-xyz) { color: green; }
|
||||
.b.svelte-xyz ~ .d:where(.svelte-xyz) ~ .h:where(.svelte-xyz) { color: green; }
|
||||
.c.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; }
|
||||
|
@ -1,22 +1,22 @@
|
||||
/* boundary of each */
|
||||
.a.svelte-xyz ~ .b.svelte-xyz {
|
||||
.a.svelte-xyz ~ .b:where(.svelte-xyz) {
|
||||
color: green;
|
||||
}
|
||||
.c.svelte-xyz ~ .d.svelte-xyz {
|
||||
.c.svelte-xyz ~ .d:where(.svelte-xyz) {
|
||||
color: green;
|
||||
}
|
||||
/* if array is empty */
|
||||
.a.svelte-xyz ~ .d.svelte-xyz {
|
||||
.a.svelte-xyz ~ .d:where(.svelte-xyz) {
|
||||
color: green;
|
||||
}
|
||||
/* if array has multiple items */
|
||||
.c.svelte-xyz ~ .b.svelte-xyz {
|
||||
.c.svelte-xyz ~ .b:where(.svelte-xyz) {
|
||||
color: green;
|
||||
}
|
||||
/* normal sibling */
|
||||
.b.svelte-xyz ~ .c.svelte-xyz {
|
||||
.b.svelte-xyz ~ .c:where(.svelte-xyz) {
|
||||
color: green;
|
||||
}
|
||||
.a.svelte-xyz ~ .c.svelte-xyz {
|
||||
.a.svelte-xyz ~ .c:where(.svelte-xyz) {
|
||||
color: green;
|
||||
}
|
||||
|
@ -1,30 +1,30 @@
|
||||
.a.svelte-xyz ~ .e.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz ~ .f.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.b.svelte-xyz ~ .c.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.b.svelte-xyz ~ .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.c.svelte-xyz ~ .e.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.c.svelte-xyz ~ .f.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.d.svelte-xyz ~ .e.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.d.svelte-xyz ~ .f.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.e.svelte-xyz ~ .e.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.i.svelte-xyz ~ .j.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.g.svelte-xyz ~ .h.svelte-xyz ~ .j.svelte-xyz.svelte-xyz { color: green; }
|
||||
.g.svelte-xyz ~ .i.svelte-xyz ~ .j.svelte-xyz.svelte-xyz { color: green; }
|
||||
.m.svelte-xyz ~ .m.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.m.svelte-xyz ~ .l.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.l.svelte-xyz ~ .m.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz ~ .c.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz ~ .g.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.b.svelte-xyz ~ .e.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.c.svelte-xyz ~ .g.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.c.svelte-xyz ~ .k.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.d.svelte-xyz ~ .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.g.svelte-xyz ~ .g.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.h.svelte-xyz ~ .h.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.i.svelte-xyz ~ .i.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.j.svelte-xyz ~ .j.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.g.svelte-xyz ~ .j.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.g.svelte-xyz ~ .h.svelte-xyz ~ .i.svelte-xyz ~ .j.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
|
||||
.a.svelte-xyz ~ .f:where(.svelte-xyz) { color: green; }
|
||||
.b.svelte-xyz ~ .c:where(.svelte-xyz) { color: green; }
|
||||
.b.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
|
||||
.c.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
|
||||
.c.svelte-xyz ~ .f:where(.svelte-xyz) { color: green; }
|
||||
.d.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
|
||||
.d.svelte-xyz ~ .f:where(.svelte-xyz) { color: green; }
|
||||
.e.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
|
||||
.i.svelte-xyz ~ .j:where(.svelte-xyz) { color: green; }
|
||||
.g.svelte-xyz ~ .h:where(.svelte-xyz) ~ .j:where(.svelte-xyz) { color: green; }
|
||||
.g.svelte-xyz ~ .i:where(.svelte-xyz) ~ .j:where(.svelte-xyz) { color: green; }
|
||||
.m.svelte-xyz ~ .m:where(.svelte-xyz) { color: green; }
|
||||
.m.svelte-xyz ~ .l:where(.svelte-xyz) { color: green; }
|
||||
.l.svelte-xyz ~ .m:where(.svelte-xyz) { color: green; }
|
||||
.a.svelte-xyz ~ .c:where(.svelte-xyz) { color: green; }
|
||||
.a.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; }
|
||||
.b.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
|
||||
.c.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; }
|
||||
.c.svelte-xyz ~ .k:where(.svelte-xyz) { color: green; }
|
||||
.d.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
|
||||
.g.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; }
|
||||
.h.svelte-xyz ~ .h:where(.svelte-xyz) { color: green; }
|
||||
.i.svelte-xyz ~ .i:where(.svelte-xyz) { color: green; }
|
||||
.j.svelte-xyz ~ .j:where(.svelte-xyz) { color: green; }
|
||||
.g.svelte-xyz ~ .j:where(.svelte-xyz) { color: green; }
|
||||
.g.svelte-xyz ~ .h:where(.svelte-xyz) ~ .i:where(.svelte-xyz) ~ .j:where(.svelte-xyz) { color: green; }
|
||||
|
||||
/* no match */
|
||||
/* (unused) .e ~ .f { color: green; }*/
|
||||
|
@ -1,8 +1,8 @@
|
||||
.a.svelte-xyz ~ .b.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz ~ .c.svelte-xyz { color: green; }
|
||||
.b.svelte-xyz ~ .d.svelte-xyz { color: green; }
|
||||
.c.svelte-xyz ~ .d.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz ~ .d.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz ~ .b:where(.svelte-xyz) { color: green; }
|
||||
.a.svelte-xyz ~ .c:where(.svelte-xyz) { color: green; }
|
||||
.b.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
|
||||
.c.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
|
||||
.a.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
|
||||
|
||||
/* no match */
|
||||
/* (unused) .b ~ .c { color: green; }*/
|
||||
|
@ -1,60 +1,60 @@
|
||||
/* boundary of each */
|
||||
.a.svelte-xyz ~ .d.svelte-xyz.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz ~ .e.svelte-xyz.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz ~ .f.svelte-xyz.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz ~ .g.svelte-xyz.svelte-xyz { color: green; }
|
||||
.c.svelte-xyz ~ .d.svelte-xyz.svelte-xyz { color: green; }
|
||||
.c.svelte-xyz ~ .e.svelte-xyz.svelte-xyz { color: green; }
|
||||
.c.svelte-xyz ~ .f.svelte-xyz.svelte-xyz { color: green; }
|
||||
.c.svelte-xyz ~ .g.svelte-xyz.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
|
||||
.a.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
|
||||
.a.svelte-xyz ~ .f:where(.svelte-xyz) { color: green; }
|
||||
.a.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; }
|
||||
.c.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
|
||||
.c.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
|
||||
.c.svelte-xyz ~ .f:where(.svelte-xyz) { color: green; }
|
||||
.c.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; }
|
||||
|
||||
/* nested boundary of each */
|
||||
.j.svelte-xyz ~ .m.svelte-xyz.svelte-xyz { color: green; }
|
||||
.j.svelte-xyz ~ .n.svelte-xyz.svelte-xyz { color: green; }
|
||||
.j.svelte-xyz ~ .o.svelte-xyz.svelte-xyz { color: green; }
|
||||
.k.svelte-xyz ~ .m.svelte-xyz.svelte-xyz { color: green; }
|
||||
.k.svelte-xyz ~ .n.svelte-xyz.svelte-xyz { color: green; }
|
||||
.k.svelte-xyz ~ .o.svelte-xyz.svelte-xyz { color: green; }
|
||||
.l.svelte-xyz ~ .m.svelte-xyz.svelte-xyz { color: green; }
|
||||
.l.svelte-xyz ~ .n.svelte-xyz.svelte-xyz { color: green; }
|
||||
.l.svelte-xyz ~ .o.svelte-xyz.svelte-xyz { color: green; }
|
||||
.j.svelte-xyz ~ .m:where(.svelte-xyz) { color: green; }
|
||||
.j.svelte-xyz ~ .n:where(.svelte-xyz) { color: green; }
|
||||
.j.svelte-xyz ~ .o:where(.svelte-xyz) { color: green; }
|
||||
.k.svelte-xyz ~ .m:where(.svelte-xyz) { color: green; }
|
||||
.k.svelte-xyz ~ .n:where(.svelte-xyz) { color: green; }
|
||||
.k.svelte-xyz ~ .o:where(.svelte-xyz) { color: green; }
|
||||
.l.svelte-xyz ~ .m:where(.svelte-xyz) { color: green; }
|
||||
.l.svelte-xyz ~ .n:where(.svelte-xyz) { color: green; }
|
||||
.l.svelte-xyz ~ .o:where(.svelte-xyz) { color: green; }
|
||||
|
||||
/* parent each */
|
||||
.d.svelte-xyz ~ .e.svelte-xyz.svelte-xyz { color: green; }
|
||||
.e.svelte-xyz ~ .f.svelte-xyz.svelte-xyz { color: green; }
|
||||
.d.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
|
||||
.e.svelte-xyz ~ .f:where(.svelte-xyz) { color: green; }
|
||||
|
||||
/* child each */
|
||||
.g.svelte-xyz ~ .h.svelte-xyz.svelte-xyz { color: green; }
|
||||
.g.svelte-xyz ~ .h:where(.svelte-xyz) { color: green; }
|
||||
|
||||
/* wrap around */
|
||||
.f.svelte-xyz ~ .d.svelte-xyz.svelte-xyz { color: green; }
|
||||
.f.svelte-xyz ~ .e.svelte-xyz.svelte-xyz { color: green; }
|
||||
.f.svelte-xyz ~ .f.svelte-xyz.svelte-xyz { color: green; }
|
||||
.f.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
|
||||
.f.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
|
||||
.f.svelte-xyz ~ .f:where(.svelte-xyz) { color: green; }
|
||||
|
||||
.h.svelte-xyz ~ .g.svelte-xyz.svelte-xyz { color: green; }
|
||||
.i.svelte-xyz ~ .h.svelte-xyz.svelte-xyz { color: green; }
|
||||
.i.svelte-xyz ~ .g.svelte-xyz.svelte-xyz { color: green; }
|
||||
.h.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; }
|
||||
.i.svelte-xyz ~ .h:where(.svelte-xyz) { color: green; }
|
||||
.i.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; }
|
||||
|
||||
/* wrap around self */
|
||||
.d.svelte-xyz ~ .d.svelte-xyz.svelte-xyz { color: green; }
|
||||
.e.svelte-xyz ~ .e.svelte-xyz.svelte-xyz { color: green; }
|
||||
.f.svelte-xyz ~ .f.svelte-xyz.svelte-xyz { color: green; }
|
||||
.g.svelte-xyz ~ .g.svelte-xyz.svelte-xyz { color: green; }
|
||||
.h.svelte-xyz ~ .h.svelte-xyz.svelte-xyz { color: green; }
|
||||
.i.svelte-xyz ~ .i.svelte-xyz.svelte-xyz { color: green; }
|
||||
.d.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
|
||||
.e.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
|
||||
.f.svelte-xyz ~ .f:where(.svelte-xyz) { color: green; }
|
||||
.g.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; }
|
||||
.h.svelte-xyz ~ .h:where(.svelte-xyz) { color: green; }
|
||||
.i.svelte-xyz ~ .i:where(.svelte-xyz) { color: green; }
|
||||
|
||||
/* wrap around self ~ next */
|
||||
.e.svelte-xyz ~ .e.svelte-xyz ~ .f.svelte-xyz { color: green; }
|
||||
.e.svelte-xyz ~ .e.svelte-xyz ~ .d.svelte-xyz { color: green; }
|
||||
.h.svelte-xyz ~ .h.svelte-xyz ~ .i.svelte-xyz { color: green; }
|
||||
.h.svelte-xyz ~ .h.svelte-xyz ~ .g.svelte-xyz { color: green; }
|
||||
.e.svelte-xyz ~ .e:where(.svelte-xyz) ~ .f:where(.svelte-xyz) { color: green; }
|
||||
.e.svelte-xyz ~ .e:where(.svelte-xyz) ~ .d:where(.svelte-xyz) { color: green; }
|
||||
.h.svelte-xyz ~ .h:where(.svelte-xyz) ~ .i:where(.svelte-xyz) { color: green; }
|
||||
.h.svelte-xyz ~ .h:where(.svelte-xyz) ~ .g:where(.svelte-xyz) { color: green; }
|
||||
|
||||
/* general siblings */
|
||||
.a.svelte-xyz ~ .h.svelte-xyz.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz ~ .i.svelte-xyz.svelte-xyz { color: green; }
|
||||
.c.svelte-xyz ~ .h.svelte-xyz.svelte-xyz { color: green; }
|
||||
.c.svelte-xyz ~ .i.svelte-xyz.svelte-xyz { color: green; }
|
||||
.d.svelte-xyz ~ .f.svelte-xyz.svelte-xyz { color: green; }
|
||||
.d.svelte-xyz ~ .g.svelte-xyz.svelte-xyz { color: green; }
|
||||
.e.svelte-xyz ~ .g.svelte-xyz.svelte-xyz { color: green; }
|
||||
.g.svelte-xyz ~ .i.svelte-xyz.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz ~ .h:where(.svelte-xyz) { color: green; }
|
||||
.a.svelte-xyz ~ .i:where(.svelte-xyz) { color: green; }
|
||||
.c.svelte-xyz ~ .h:where(.svelte-xyz) { color: green; }
|
||||
.c.svelte-xyz ~ .i:where(.svelte-xyz) { color: green; }
|
||||
.d.svelte-xyz ~ .f:where(.svelte-xyz) { color: green; }
|
||||
.d.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; }
|
||||
.e.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; }
|
||||
.g.svelte-xyz ~ .i:where(.svelte-xyz) { color: green; }
|
||||
|
@ -1,3 +1,3 @@
|
||||
div.svelte-xyz ~ span.svelte-xyz {
|
||||
div.svelte-xyz ~ span:where(.svelte-xyz) {
|
||||
color: green;
|
||||
}
|
||||
|
@ -1,3 +1,3 @@
|
||||
h1.svelte-xyz ~ p.svelte-xyz {
|
||||
h1.svelte-xyz ~ p:where(.svelte-xyz) {
|
||||
color: red;
|
||||
}
|
||||
|
@ -1,12 +1,12 @@
|
||||
.a.svelte-xyz ~ .b.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz ~ .c.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz ~ .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.b.svelte-xyz ~ .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.c.svelte-xyz ~ .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz ~ .b:where(.svelte-xyz) { color: green; }
|
||||
.a.svelte-xyz ~ .c:where(.svelte-xyz) { color: green; }
|
||||
.a.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
|
||||
.b.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
|
||||
.c.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
|
||||
|
||||
.a.svelte-xyz ~ .c.svelte-xyz ~ .c.svelte-xyz.svelte-xyz { color: green; }
|
||||
.c.svelte-xyz ~ .c.svelte-xyz ~ .d.svelte-xyz.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz ~ .c.svelte-xyz ~ .c.svelte-xyz ~ .d.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz ~ .c:where(.svelte-xyz) ~ .c:where(.svelte-xyz) { color: green; }
|
||||
.c.svelte-xyz ~ .c:where(.svelte-xyz) ~ .d:where(.svelte-xyz) { color: green; }
|
||||
.a.svelte-xyz ~ .c:where(.svelte-xyz) ~ .c:where(.svelte-xyz) ~ .d:where(.svelte-xyz) { color: green; }
|
||||
|
||||
/* no match */
|
||||
/* (unused) .b ~ .c { color: green; }*/
|
||||
|
@ -1,8 +1,8 @@
|
||||
.a.svelte-xyz ~ .b.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz ~ .c.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz ~ .d.svelte-xyz { color: green; }
|
||||
.b.svelte-xyz ~ .d.svelte-xyz { color: green; }
|
||||
.c.svelte-xyz ~ .d.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz ~ .b:where(.svelte-xyz) { color: green; }
|
||||
.a.svelte-xyz ~ .c:where(.svelte-xyz) { color: green; }
|
||||
.a.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
|
||||
.b.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
|
||||
.c.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
|
||||
|
||||
/* no match */
|
||||
/* (unused) .b ~ .c { color: green; }*/
|
||||
|
@ -1,3 +1,3 @@
|
||||
h1.svelte-xyz ~ p.svelte-xyz {
|
||||
h1.svelte-xyz ~ p:where(.svelte-xyz) {
|
||||
color: red;
|
||||
}
|
||||
|
@ -1,3 +1,3 @@
|
||||
h1.svelte-xyz ~ p.svelte-xyz {
|
||||
h1.svelte-xyz ~ p:where(.svelte-xyz) {
|
||||
color: red;
|
||||
}
|
||||
|
@ -1,3 +1,3 @@
|
||||
h1.svelte-xyz ~ p.svelte-xyz {
|
||||
h1.svelte-xyz ~ p:where(.svelte-xyz) {
|
||||
color: red;
|
||||
}
|
||||
|
@ -1,11 +1,11 @@
|
||||
h1.svelte-xyz ~ span.svelte-xyz {
|
||||
h1.svelte-xyz ~ span:where(.svelte-xyz) {
|
||||
color: green;
|
||||
}
|
||||
|
||||
h1.svelte-xyz ~ p.svelte-xyz {
|
||||
h1.svelte-xyz ~ p:where(.svelte-xyz) {
|
||||
color: red;
|
||||
}
|
||||
|
||||
span.svelte-xyz ~ p.svelte-xyz {
|
||||
span.svelte-xyz ~ p:where(.svelte-xyz) {
|
||||
color: blue;
|
||||
}
|
||||
|
@ -1,3 +1,3 @@
|
||||
html body .root.svelte-xyz p.svelte-xyz {
|
||||
html body .root.svelte-xyz p:where(.svelte-xyz) {
|
||||
color: red;
|
||||
}
|
||||
|
@ -1,3 +1,3 @@
|
||||
.root.svelte-xyz p.svelte-xyz {
|
||||
.root.svelte-xyz p:where(.svelte-xyz) {
|
||||
color: red;
|
||||
}
|
||||
|
@ -1,3 +1,3 @@
|
||||
div.svelte-xyz section p.svelte-xyz {
|
||||
div.svelte-xyz section p:where(.svelte-xyz) {
|
||||
color: red;
|
||||
}
|
||||
|
@ -1,3 +1,3 @@
|
||||
div.svelte-xyz p.svelte-xyz {
|
||||
div.svelte-xyz p:where(.svelte-xyz) {
|
||||
color: red;
|
||||
}
|
||||
|
@ -1,8 +1,8 @@
|
||||
a.svelte-xyz b c span.svelte-xyz {
|
||||
a.svelte-xyz b c span:where(.svelte-xyz) {
|
||||
color: red;
|
||||
font-size: 2em;
|
||||
font-family: 'Comic Sans MS';
|
||||
}
|
||||
.foo.svelte-xyz.svelte-xyz {
|
||||
.foo.svelte-xyz {
|
||||
color: green;
|
||||
}
|
||||
|
@ -1,13 +1,13 @@
|
||||
.a.svelte-xyz + .b.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz + .c.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz + .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz + .e.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz + .f.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz + .g.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz + .h.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz + .b:where(.svelte-xyz) { color: green; }
|
||||
.a.svelte-xyz + .c:where(.svelte-xyz) { color: green; }
|
||||
.a.svelte-xyz + .d:where(.svelte-xyz) { color: green; }
|
||||
.a.svelte-xyz + .e:where(.svelte-xyz) { color: green; }
|
||||
.a.svelte-xyz + .f:where(.svelte-xyz) { color: green; }
|
||||
.a.svelte-xyz + .g:where(.svelte-xyz) { color: green; }
|
||||
.a.svelte-xyz + .h:where(.svelte-xyz) { color: green; }
|
||||
|
||||
.b.svelte-xyz + .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.c.svelte-xyz + .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.b.svelte-xyz + .e.svelte-xyz + .f.svelte-xyz + .h.svelte-xyz { color: green; }
|
||||
.b.svelte-xyz + .d.svelte-xyz + .h.svelte-xyz.svelte-xyz { color: green; }
|
||||
.c.svelte-xyz + .g.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.b.svelte-xyz + .d:where(.svelte-xyz) { color: green; }
|
||||
.c.svelte-xyz + .d:where(.svelte-xyz) { color: green; }
|
||||
.b.svelte-xyz + .e:where(.svelte-xyz) + .f:where(.svelte-xyz) + .h:where(.svelte-xyz) { color: green; }
|
||||
.b.svelte-xyz + .d:where(.svelte-xyz) + .h:where(.svelte-xyz) { color: green; }
|
||||
.c.svelte-xyz + .g:where(.svelte-xyz) { color: green; }
|
||||
|
@ -1,3 +1,3 @@
|
||||
div.svelte-xyz + span.svelte-xyz {
|
||||
div.svelte-xyz + span:where(.svelte-xyz) {
|
||||
color: green;
|
||||
}
|
||||
|
@ -1,3 +1,3 @@
|
||||
h1.svelte-xyz + span.svelte-xyz {
|
||||
h1.svelte-xyz + span:where(.svelte-xyz) {
|
||||
color: red;
|
||||
}
|
||||
|
@ -1,12 +1,12 @@
|
||||
.a.svelte-xyz + .b.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz + .c.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz + .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.b.svelte-xyz + .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.c.svelte-xyz + .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz + .b:where(.svelte-xyz) { color: green; }
|
||||
.a.svelte-xyz + .c:where(.svelte-xyz) { color: green; }
|
||||
.a.svelte-xyz + .d:where(.svelte-xyz) { color: green; }
|
||||
.b.svelte-xyz + .d:where(.svelte-xyz) { color: green; }
|
||||
.c.svelte-xyz + .d:where(.svelte-xyz) { color: green; }
|
||||
|
||||
.a.svelte-xyz + .c.svelte-xyz + .c.svelte-xyz.svelte-xyz { color: green; }
|
||||
.c.svelte-xyz + .c.svelte-xyz + .d.svelte-xyz.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz + .c.svelte-xyz + .c.svelte-xyz + .d.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz + .c:where(.svelte-xyz) + .c:where(.svelte-xyz) { color: green; }
|
||||
.c.svelte-xyz + .c:where(.svelte-xyz) + .d:where(.svelte-xyz) { color: green; }
|
||||
.a.svelte-xyz + .c:where(.svelte-xyz) + .c:where(.svelte-xyz) + .d:where(.svelte-xyz) { color: green; }
|
||||
|
||||
/* no match */
|
||||
/* (unused) .b + .c { color: green; }*/
|
||||
|
@ -1,8 +1,8 @@
|
||||
.a.svelte-xyz + .b.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz + .c.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz + .d.svelte-xyz { color: green; }
|
||||
.b.svelte-xyz + .d.svelte-xyz { color: green; }
|
||||
.c.svelte-xyz + .d.svelte-xyz { color: green; }
|
||||
.a.svelte-xyz + .b:where(.svelte-xyz) { color: green; }
|
||||
.a.svelte-xyz + .c:where(.svelte-xyz) { color: green; }
|
||||
.a.svelte-xyz + .d:where(.svelte-xyz) { color: green; }
|
||||
.b.svelte-xyz + .d:where(.svelte-xyz) { color: green; }
|
||||
.c.svelte-xyz + .d:where(.svelte-xyz) { color: green; }
|
||||
|
||||
/* no match */
|
||||
/* (unused) .b + .c { color: green; }*/
|
||||
|
@ -1,3 +1,3 @@
|
||||
h1.svelte-xyz + span.svelte-xyz {
|
||||
h1.svelte-xyz + span:where(.svelte-xyz) {
|
||||
color: red;
|
||||
}
|
||||
|
@ -1,3 +1,3 @@
|
||||
h1.svelte-xyz + span.svelte-xyz {
|
||||
h1.svelte-xyz + span:where(.svelte-xyz) {
|
||||
color: red;
|
||||
}
|
||||
|
@ -1,3 +1,3 @@
|
||||
h1.svelte-xyz + span.svelte-xyz {
|
||||
h1.svelte-xyz + span:where(.svelte-xyz) {
|
||||
color: red;
|
||||
}
|
||||
|
@ -1,3 +1,3 @@
|
||||
h1.svelte-xyz + span.svelte-xyz {
|
||||
h1.svelte-xyz + span:where(.svelte-xyz) {
|
||||
color: red;
|
||||
}
|
||||
|
@ -1,2 +1,2 @@
|
||||
input.svelte-xyz:focus + div.svelte-xyz { color: red; }
|
||||
input.svelte-xyz:focus ~ div.svelte-xyz { color: red; }
|
||||
input.svelte-xyz:focus + div:where(.svelte-xyz) { color: red; }
|
||||
input.svelte-xyz:focus ~ div:where(.svelte-xyz) { color: red; }
|
||||
|
Loading…
Reference in new issue