Counted

The Counted utility automatically sets a CSS custom property with the number of direct children an element has. This enables dynamic styling based on child count without requiring JavaScript, making it useful for adaptive layouts that need to respond to the number of items they contain.

Usage

Apply the .counted class to a parent element, and it will automatically provide a --count custom property that contains the number of direct children (up to 10). This count can then be used in CSS calculations or other layout components.

<div class="counted">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <!-- --count will be set to 3 -->
</div>

The utility works particularly well with layout components like the switcher layout, where you can use var(--count) in calculations to create adaptive behavior based on the number of child elements.

Custom Properties (Read-only)