CSS sibling-count() Function

CSS sibling-count() Function

The CSS sibling-count() function returns the total number of sibling elements that share the same parent, including the element itself.

It returns an integer that can be used in CSS calculations to create layouts and styles that adapt to the number of child elements. Common uses include automatically sizing items, distributing space, and calculating values without manually specifying the number of siblings.

Syntax

sibling-count()

The sibling-count() function does not accept parameters.

It is commonly used inside calc() or another CSS expression that accepts a numeric value.

For example:

width: calc(100% / sibling-count());

This divides the available width by the number of sibling elements.

Other examples include:

flex-basis: calc(100% / sibling-count());
gap: calc(40px / sibling-count());
padding: calc(30px / sibling-count());
font-size: calc(2rem / sibling-count());

The function returns a CSS <integer> value.

It counts sibling elements, including the element on which the declaration is evaluated.

Parameters

The sibling-count() function does not accept any arguments.

The following is valid:

width: calc(100% / sibling-count());

The following is invalid because the function does not accept a parameter:

width: calc(100% / sibling-count(3));

The function automatically determines the count from the document's element structure.

How It Works

The sibling-count() function determines how many child elements belong to the current element's parent.

For example, consider the following HTML:

<div class="container">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
  <div class="item">Four</div>
</div>

Each .item element has three other siblings.

Because the function includes the current element, it returns 4 for every item.

For example:

.item {
  width: calc(100% / sibling-count());
}

The width calculation becomes:

width: calc(100% / 4);

Each item receives a width of 25% of its containing block.

If another child element is added, the function returns 5 for all five children.

The calculation then becomes:

width: calc(100% / 5);

Each item receives 20% of the available width.

The browser recalculates the value when the relevant element structure changes.

Counting Sibling Elements

The sibling-count() function counts elements that share the same parent.

The Current Element Is Included

<div class="group">
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
</div>

For each span, sibling-count() returns 3.

Different Element Types Are Included

<div class="group">
  <h3>Heading</h3>
  <p>Paragraph</p>
  <button>Button</button>
</div>

For each child, the function returns 3, even though the elements have different tag names.

The function does not count only elements matching the CSS selector.

Text Nodes Are Not Counted

Whitespace and ordinary text nodes do not increase the count.

<div class="group">
  Text before
  <span>First</span>
  Text between
  <span>Second</span>
</div>

For each span, the function returns 2.

Nested Descendants Are Not Counted

<div class="group">
  <div class="item">
    <span>Nested element</span>
  </div>
  <div class="item">Second item</div>
</div>

For each outer .item, the function returns 2.

For the nested span, it returns 1, because the span is the only child element of its parent.

Hidden Elements Are Still Counted

<div class="group">
  <div class="item">One</div>
  <div class="item" style="display: none;">Two</div>
  <div class="item">Three</div>
</div>

The function returns 3 for the child elements, including the element hidden with display: none.

The count is based on the element structure rather than the number of visible boxes.

Using sibling-count() in Calculations

Because sibling-count() returns an integer, it can participate in CSS mathematical expressions.

Division

.item {
  width: calc(100% / sibling-count());
}

Each child receives an equal share of the containing block's width, before accounting for additional layout constraints.

Multiplication

.item {
  padding: calc(sibling-count() * 2px);
}

If the parent has five child elements, each item receives 10px of padding.

Subtraction

.item {
  margin-top: calc(30px - sibling-count() * 2px);
}

With five siblings, the calculated margin is 20px.

Using clamp()

.item {
  font-size: clamp(14px, calc(30px / sibling-count()), 20px);
}

The clamp() function limits the calculated font size to a minimum of 14px and a maximum of 20px.

Using min() and max()

.item {
  padding: max(8px, calc(32px / sibling-count()));
}

This ensures that the padding does not become smaller than 8px.

These calculations can be useful when the number of items varies, but they should be tested with small and large sibling counts to avoid unwanted sizing.

Dynamic Layouts

The sibling-count() function can help distribute space automatically among sibling elements.

For example:

.tabs {
  display: flex;
}
.tabs > button {
  width: calc(100% / sibling-count());
}

If the container contains four buttons, each button receives a calculated width of 25%.

If a fifth button is added, each button receives 20%.

For equal-width layouts, Flexbox and Grid can often achieve the same result without counting elements:

.tabs {
  display: flex;
}
.tabs > button {
  flex: 1;
}

The advantage of sibling-count() is that the calculated count can also be used in other CSS properties.

For example, a component might adjust padding or decorative effects according to the number of children.

Remember that the function counts all child elements, not only buttons or elements matching a particular class.

Using sibling-count() With Flexbox

Flexbox can use sibling-count() to calculate the initial size of flex items.

For example:

.flex-container {
  display: flex;
  width: 100%;
}
.flex-container > .flex-item {
  box-sizing: border-box;
  flex: 0 0 calc(100% / sibling-count());
}

Each item receives an equal fraction of the container width.

With four child elements, the calculated flex basis is 25%.

With five child elements, it becomes 20%.

Accounting for Gaps

If the flex container uses a gap, subtract the total gap width before dividing the remaining space.

.flex-container {
  --gap: 12px;
  display: flex;
  gap: var(--gap);
}
.flex-container > .flex-item {
  box-sizing: border-box;
  min-width: 0;
  flex: 0 0 calc(
    (100% - (sibling-count() - 1) * var(--gap)) /
    sibling-count()
  );
}

For four items, there are three gaps. The calculation subtracts the width of those gaps before distributing the remaining space.

All children of the parent are included in the count, so this pattern works best when every child participates in the same flex layout.

For a simpler equal-width flex layout, flex: 1 is usually sufficient.

CSS Custom Properties

The sibling-count() function can be combined with CSS custom properties to make calculations easier to reuse.

For example:

.item {
  --count: sibling-count();
  width: calc(100% / var(--count));
  padding: calc(24px / var(--count));
}

The custom property stores the function expression, which is evaluated when used in a compatible CSS calculation.

Each item uses its own sibling count.

Providing a Fallback

A custom property can also provide a default value before the newer function is applied.

.item {
  --count: 4;
  width: calc(100% / var(--count));
}
@supports (width: calc(100% / sibling-count())) {
  .item {
    --count: sibling-count();
  }
}

In browsers that support the function, the count is determined automatically.

In older browsers, the example uses the manually specified value of 4.

This fallback is appropriate only when the expected number of items is known. For a layout with an unpredictable number of children, consider Flexbox or Grid instead.

sibling-count() vs. sibling-index()

The sibling-count() and sibling-index() functions both examine an element's position within its parent, but they return different values.

For example:

.item {
  width: calc(100% / sibling-count());
  transition-delay: calc(sibling-index() * 100ms);
}

The width is based on the total number of children, while the transition delay is based on each child's position.

The two functions can be combined to calculate a value that varies across the sibling group.

.item {
  opacity: calc(sibling-index() / sibling-count());
}

For a group of four elements, the calculated opacity values are 0.25, 0.5, 0.75, and 1.

Both functions return integers, and neither accepts parameters.

Example

The following example uses sibling-count() to distribute four items evenly across a container.

HTML:

<div class="count-demo">
  <div class="count-item">One</div>
  <div class="count-item">Two</div>
  <div class="count-item">Three</div>
  <div class="count-item">Four</div>
</div>

CSS:

.count-demo {
  display: flex;
  width: 100%;
  max-width: 500px;
  border: 1px solid #ddd;
}
.count-item {
  box-sizing: border-box;
  flex: 1;
  min-width: 0;
  padding: 15px 5px;
  color: #fff;
  background-color: #3498db;
  text-align: center;
  border-right: 1px solid #fff;
}
.count-item:last-child {
  border-right: 0;
}
@supports (width: calc(100% / sibling-count())) {
  .count-item {
    flex: 0 0 calc(100% / sibling-count());
  }
}

Each item receives one-quarter of the available width.

If another child element is added, the calculated width automatically changes to one-fifth.

The fallback uses flex: 1, which also distributes the available space evenly in browsers that do not support sibling-count().

Dynamic Spacing Example

The following example adjusts the padding of each item according to the number of siblings.

HTML:

<div class="spacing-demo">
  <span>HTML</span>
  <span>CSS</span>
  <span>JavaScript</span>
</div>

CSS:

.spacing-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.spacing-demo > span {
  padding: 10px;
  color: #fff;
  background-color: #3498db;
}
@supports (padding: calc(30px / sibling-count())) {
  .spacing-demo > span {
    padding: calc(30px / sibling-count());
  }
}

Because the container has three child elements, the calculated padding is 10px.

If a fourth item is added, the padding becomes 7.5px.

This technique is useful for compact groups, although a minimum padding value may be desirable when the number of children becomes large.

For example:

padding: max(8px, calc(30px / sibling-count()));

This prevents the padding from becoming smaller than 8px.

Dynamic Color Example

The sibling-count() function can be combined with sibling-index() to distribute colors across a group of elements.

HTML:

<div class="color-demo">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

CSS:

.color-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.color-demo > div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 65px;
  color: #fff;
  background-color: #3498db;
}
@supports (background-color: hsl(calc(360deg / sibling-count() * sibling-index()) 70% 45%)) {
  .color-demo > div {
    background-color: hsl(calc(360deg / sibling-count() * sibling-index()) 70% 45%);
  }
}

The hue is calculated by dividing a full 360-degree color wheel by the number of siblings and multiplying the result by each element's index.

With five children, the hue changes in 72-degree increments.

If the number of children changes, the hue spacing adjusts automatically.

Check text contrast when using calculated background colors, especially for interactive elements.

Adding and Removing Elements

The sibling-count() function responds to changes in the element structure.

For example, consider a container with three items:

<div class="dynamic-group">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
</div>

With the following CSS:

.dynamic-group {
  display: flex;
}
.dynamic-group > .item {
  width: calc(100% / sibling-count());
}

Each item receives approximately 33.33% of the available width.

If a fourth child element is inserted into the container, the function returns 4 and each item receives 25%.

If an item is removed, the function updates again.

No JavaScript calculation is needed to update the CSS value.

However, the function does not add or remove elements. It only reflects the current structure.

Also remember that hiding an element with display: none does not remove it from the count. To reduce the count, the element must actually be removed from the relevant parent structure.

Common Uses

The sibling-count() function is useful when CSS values should depend on the number of child elements.

• Equal-width items: Divide available width among a changing number of children.
• Navigation menus: Calculate sizes for menu items based on their total count.
• Tab groups: Distribute available space among tabs.
• Dynamic spacing: Adjust padding or margins according to the number of children.
• Color distribution: Combine the count with sibling positions to calculate color values.
• Reusable components: Avoid manually updating numeric values when child elements are added or removed.
• CSS calculations: Use the sibling count in calc(), min(), max(), and clamp().
• Responsive interface styling: Adjust selected visual properties according to the number of items.

For example, a navigation bar can calculate each link's width:

.navigation {
  display: flex;
}
.navigation > a {
  box-sizing: border-box;
  width: calc(100% / sibling-count());
  text-align: center;
}

Each link receives an equal share of the navigation container's width.

This approach assumes all direct child elements participate in the same layout.

For simple equal-width layouts, existing Flexbox and Grid features remain useful alternatives with broader historical browser support.

Limitations

The sibling-count() function has several requirements and behaviors to consider.

• The function does not accept parameters.
• It returns an integer representing the number of sibling elements, including the current element.
• It counts all child elements of the parent, not only elements matching a CSS selector.
• It does not count text nodes, comments, or other non-element nodes.
• Nested descendants are not included in the parent's direct child count.
• Elements hidden with display: none are still counted.
• The function does not count only visible elements or rendered layout boxes.
• The result depends on the element structure and can change when child elements are added or removed.
• The function returns a numeric value, not a text string.
• It does not create, remove, or rearrange elements.
• Its result must be used in a CSS value context that accepts the resulting numeric type.
• Calculated widths may require adjustments for gaps, padding, borders, and minimum sizes.
• Older browsers may not support the function.

The following declaration is valid:

width: calc(100% / sibling-count());

The following is invalid because the function does not accept an argument:

width: calc(100% / sibling-count(5));

The following is also invalid because a length cannot be supplied as a parameter:

width: calc(100% / sibling-count(10px));

Feature Detection

Use @supports to apply calculations involving sibling-count() only when the browser recognizes the function.

.item {
  flex: 1;
}
@supports (width: calc(100% / sibling-count())) {
  .item {
    flex: 0 0 calc(100% / sibling-count());
  }
}

This provides a Flexbox fallback for browsers without support.

Pseudo-Elements

When used on ordinary pseudo-elements such as ::before and ::after, the function generally uses the sibling count of the originating element rather than counting pseudo-elements as additional children.

Advanced cases involving shadow DOM and element-backed pseudo-elements follow additional rules defined by the CSS specification.

Browser Support

The CSS sibling-count() function has Baseline Newly available browser support as of August 2026. It works across the latest major browser versions, but older browsers may not support it.

Support includes recent versions of Chrome, Edge, Firefox, and Safari.

Because the feature is relatively new, use progressive enhancement or established layout techniques when supporting older browsers.

For current compatibility information, visit Can I Use? .

Specifications

The sibling-count() function is defined in the CSS Values and Units Module Level 5 specification.

The specification defines the tree-counting functions, their integer return values, and how they relate to an element's sibling structure.

Related features include sibling-index(), calc(), min(), max(), clamp(), and the :nth-child() pseudo-class.