sibling-count()

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

The sibling-count() CSS function returns an integer representing the total number of direct child DOM elements of the parent element on which it is used.

Note: The counter() function provides a similar result but it returns a <string>, while sibling-count() returns an <integer> which can be used for calculations.

Syntax

css

--total-sibling-elements: sibling-count();

Parameters

The sibling-count() function doesn't accept parameters.

Return value

An integer; the total number of direct child DOM elements.

Examples

Dynamic column count

This example demonstrates setting the number of columns on a container to be equal to the number of its children, enabling placing each child in its own column.

HTML

We include a <ul> container and several <li> elements children.

html

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

CSS

We set the column-count of the container to be equal to the quantity of direct children it contains. We also set every odd element to have a background-color to better demonstrate the resulting effect.

css

ul {
  column-count: sibling-count();
  text-align: center;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li:nth-of-type(odd) {
  background-color: rgb(0 0 0 / 0.05);
}

Results

Specifications

Specification
CSS Values and Units Module Level 5 # funcdef-sibling-count