You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
svelte/test/css/samples/siblings-combinator-each-ne.../input.svelte

113 lines
2.1 KiB

<script>
let array = [1];
</script>
<style>
/* boundary of each */
.a + .d { color: green; }
.a + .e { color: green; }
.a + .f { color: green; }
.a + .g { color: green; }
.c + .d { color: green; }
.c + .e { color: green; }
.c + .f { color: green; }
.c + .g { color: green; }
/* nested boundary of each */
.j + .m { color: green; }
.j + .n { color: green; }
.j + .o { color: green; }
.k + .m { color: green; }
.k + .n { color: green; }
.k + .o { color: green; }
.l + .m { color: green; }
.l + .n { color: green; }
.l + .o { color: green; }
/* parent each */
.d + .e { color: green; }
.e + .f { color: green; }
/* child each */
.g + .h { color: green; }
/* wrap around */
.f + .d { color: green; }
.f + .e { color: green; }
.f + .f { color: green; }
.h + .g { color: green; }
.i + .h { color: green; }
.i + .g { color: green; }
/* wrap around self */
.d + .d { color: green; }
.e + .e { color: green; }
.f + .f { color: green; }
.g + .g { color: green; }
.h + .h { color: green; }
.i + .i { color: green; }
/* wrap around self + next */
.e + .e + .f { color: green; }
.e + .e + .d { color: green; }
.h + .h + .i { color: green; }
.h + .h + .g { color: green; }
/* no match */
.a + .h { color: green; }
.a + .i { color: green; }
.c + .h { color: green; }
.c + .i { color: green; }
.d + .f { color: green; }
.d + .g { color: green; }
.e + .g { color: green; }
.g + .i { color: green; }
</style>
<div class="a" />
{#each array as item}
<div class="b" />
<div class="c" />
{/each}
{#each array as item}
{#each array as item}
{#each array as item}
<div class="d" />
{/each}
<div class="e" />
{/each}
<div class="f" />
{/each}
{#each array as item}
<div class="g" />
{#each array as item}
<div class="h" />
{#each array as item}
<div class="i" />
{/each}
{/each}
{/each}
{#each array as item}
<div class="j" />
{#each array as item}
<div class="k" />
{#each array as item}
<div class="l" />
{/each}
{/each}
{/each}
{#each array as item}
{#each array as item}
{#each array as item}
<div class="m" />
{/each}
<div class="n" />
{/each}
<div class="o" />
{/each}