Styling Nested divs with One Loop

Writing nested selectors by hand is painful and error-prone:

div { background: orange; }
div div { background: purple; }
div div div { background: indigo; }
div div div div { background: blue; }
/* …and it gets worse the deeper you go */

You have a simple nested structure:

<div>1
  <div>2
    <div>3
      <div>4</div>
    </div>
  </div>
</div>

You want each level to have a different background (and maybe padding, radius, etc.) without maintaining a growing list of selectors.

<script type="module" async>
  import xfscss from "https://cdn.jsdelivr.net/npm/fscss@1.2.1/esm.min.js";
  xfscss.reboot();
</script>

<style>
@arr colors[orange, purple, indigo, blue]
@arr levels[count(@arr.colors!.length)]   /* → 1, 2, 3, 4  (v1.2.1+) */

empty{
  /* preserve — keeps loop output from being treated as extra selectors */
}

rpt(@arr.levels[], "div ") {
  background: @arr.colors[@arr.levels[]];
  padding: 10px;
  border-radius: 10px;
  color: #fff;
  margin: 8px;
}
</style>

<div>1
  <div>2
    <div>3
      <div>4</div>
    </div>
  </div>
</div>

One colors array, one levels array driven by count(@arr.colors!.length), one rpt() in selector position, and an empty{} guard.

When a loop expands, intermediate tokens can sometimes be interpreted as extra selectors. The empty{ … } block acts as a preserve barrier: it absorbs those tokens so they do not become stray rules.

empty{
  /* preserve */
}
rpt(@arr.levels[], "div ") {
  /* only this becomes real selectors */
}

Use it before (or between) loop-driven rules whenever you see unexpected selector output in the compiled CSS or console. Harmless empty rules are stripped or ignored downstream.

Before 1.2.1, count() needed a literal number (count(3, 1)). From 1.2.1 you can drive it from an array’s length:

@arr colors[orange, purple, indigo, blue]
@arr levels[count(@arr.colors!.length)]   /* length → 4 → levels 1..4 */

That keeps depth and the colors array in sync automatically — add or remove a color and the generated selector chain follows.

See the full method list on the Arrays page (.length, .list, .indices, etc.).

1. @arr colors[…] holds the values you want per level.
2. @arr levels[count(@arr.colors!.length)] builds 1, 2, 3, … matching the array size (v1.2.1+). Older style: count(4, 1).
3. empty{ /* preserve */ } keeps loop side-effects from becoming extra selectors.
4. rpt(@arr.levels[], "div ") sits in selector position. For each level it repeats the string "div " that many times: "div ", "div div ", "div div div ", …
5. Inside the block, @arr.colors[@arr.levels[]] picks the color for the current index (1-based in this pattern).
6. FSCSS expands the whole rule once per array item — one clean loop, pure CSS after compile.

The same selector-position + block rule that drives array loops in general is what makes the expansion reliable here.

Sometimes you also want utility classes that expose the same values as custom properties (or other properties). A small @define + array loop does that:

@define abc(arr){`
empty{
  /* preserve */
}
@arr i-levels[count(@arr.@use(arr)!.length)]
.p@arr.@use(arr)[@arr.i-levels[]]{
  --@arr.i-levels[]: @arr.@use(arr)[@arr.i-levels[]];
}
`}

@arr arr[RED, BLUE, GREEN]

exec(_log, "@abc(arr)")

Console / compiled output looks like:

empty{
  /* preserve */
}
.pRED {
  --1: RED;
}
.pBLUE {
  --2: BLUE;
}
.pGREEN {
  --3: GREEN;
}

This is the same preserve + length + loop idea, packaged as a reusable @define. Call it with any array name. See also inline helpers for related patterns.

Add or remove colors — levels follow automatically:

@arr colors[tomato, coral, salmon, crimson]
@arr levels[count(@arr.colors!.length)]

empty{ /* preserve */ }

rpt(@arr.levels[], "div ") {
  background: @arr.colors[@arr.levels[]];
  padding: 10px;
  border-radius: 10px;
}

Reference the level index for anything — font-size, opacity, animation-delay, etc.:

@arr colors[orange, purple, indigo]
@arr sizes[1rem, 0.9rem, 0.8rem]
@arr levels[count(@arr.colors!.length)]

empty{ /* preserve */ }

rpt(@arr.levels[], "div ") {
  background: @arr.colors[@arr.levels[]];
  font-size: @arr.sizes[@arr.levels[]];
  padding: 10px;
  border-radius: 10px;
  color: #fff;
}

Four levels — orange → purple → indigo → blue — as produced by the one-loop pattern:

Drop the one-loop snippet into a page with the 1.2.1 runtime / esm build (or compile with the CLI) to generate the same result from source.