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.

Browser support

.counted is progressively enhanced:

• Baseline — --count is derived with :has() and set on the .counted parent (inherited by its children). It is capped at 10 direct children.
• Enhanced — in browsers that support sibling-count(), --count is set on each child to the exact total, with no 10-item cap.

Read var(--count) on the children (not the parent) to benefit from both paths.

Custom Properties (Read-only)