svelte/test/css/samples/general-siblings-combinator-each-nested/input.svelte

<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}