Get the index of an element within its parent 관련

CSS > Article(s)

---

Article(s)

• More CSS Tips

---

Get the index of an element within its parent

A native CSS function to get the index of an element among its siblings within a parent element

With CSS, you can use the new sibling-index() function to get the position of any element relative to all its sibling elements. You can also rely on sibling-count() to get the number of siblings.

The results are also available within pseudo-elements.

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  ...
</div>

.container div { 
  border: calc(sibling-index()*2px) solid;
  opacity: calc(sibling-index()/sibling-count());
}
.container div::before {
  content: counter(i) "/" counter(N);
  counter-reset: N sibling-count() i sibling-index() /* they refer to the div element */
}

See sibling-index() / sibling-count() by t_afif on CodePen.

The functions are a bit verbose, so we can create our custom functions and write less code.

@function --N() {
  result: sibling-count();
}
@function --i() {
  result: calc(sibling-index() - 1); /* we can change and start from 0 instead of 1 */
}

.container div { 
  border: calc(--i()*2px) solid;
  opacity: calc(--i()/--N());
}
.container div::before {
  content: counter(i) "/" counter(N);
  counter-reset: N --N() i --i() 
}

:: note ⚠️ Limited support (Chrome only for now)

See sibling-index() / sibling-count() + custom functions by t_afif on CodePen.

:::

---

More CSS Tips

• Responsive Infinite Logo Marquee Use modern CSS and a few lines of code to create an infinite scroll animation. July 29, 2025
• How to place images around a circle A simple CSS code to correctly place a set of images (or any elements) around a circle. July 17, 2025
• Dots loader using shape() A classic 3 dots loader created using the new shape(). June 24, 2025
• The future of hexagon shapes A new way to easily create hexagon shapes using corner-shape. June 12, 2025

Get the index of an element within its parent

---

A native CSS function to get the index of an element among its siblings within a parent element