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
<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; }
|
|
|
|
/* general siblings */
|
|
.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} |