mirror of https://github.com/sveltejs/svelte
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.
113 lines
2.1 KiB
113 lines
2.1 KiB
4 years ago
|
<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}
|