jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils CSS

Gratuit Generateur CSS sibling-index et sibling-count

Generez du CSS avec sibling-index() et sibling-count() pour un stylage base sur la position DOM sans selecteurs nth-child.

Chargement de l'outil...

Qu'est-ce que Generateur CSS sibling-index et sibling-count ?

sibling-index() and sibling-count() are CSS functions (Chrome 138+) that expose the DOM position of an element among its siblings. sibling-index() returns a 1-based integer representing the element's position. sibling-count() returns the total number of sibling elements. Unlike nth-child selectors that match static patterns, these functions produce dynamic numeric values that you can use in calc() for any property accepting a number or integer. This enables stagger delays, alternating colors, width gradients, and auto-layering without hardcoded selectors.

Réponse rapide

sibling-index() returns the 1-based position of an element among its siblings, and sibling-count() returns the total number of siblings. Use them in calc() to create stagger delays, color cycles, width gradients, and position offsets that adapt automatically as the DOM changes — no nth-child selectors or JavaScript needed.

Limites

  • sibling-index() and sibling-count() require Chrome 138+. Firefox and Safari do not yet support these functions as of May 2026.
  • The functions return DOM order, not visual order. Elements reordered with CSS flexbox order or grid placement may have an index that does not match their visual position.
  • sibling-count() includes all DOM siblings, including those hidden with display: none. Use visibility: hidden to visually hide an element without removing it from the sibling count.

Comment utiliser cet outil

  1. Select the property you want to make position-aware, such as animation-delay, background-color, width, opacity, or z-index.
  2. Choose the sibling function: sibling-index() for per-element positioning or sibling-count() for container-aware scaling.
  3. Build an expression using calc() to transform the raw index into the desired value range.
  4. Copy the generated CSS and apply it to the child elements that need position-aware styling.

A quoi il sert

  • Create stagger animation delays where each item animates sequentially based on its position among siblings.
  • Build a color cycle that rotates through a palette automatically based on element index.
  • Generate a width or height gradient across sibling elements without manual nth-child rules.

Cas d'usage

Exemples concrets

Exemple

Staggered list animation

A vertical list of items fades in one by one. Apply animation-delay: calc(sibling-index() * 0.1s) to each item. The first item delays 0.1s, the second 0.2s, and so on. As items are added or removed, the delays adjust automatically.

Exemple

Color cycling across cards

A card grid cycles through three accent colors. Apply background: hsl(calc(sibling-index() * 120deg), 70%, 50%). Each card gets a hue rotated by 120 degrees from the previous one, producing a natural color cycle with no nth-child selectors.

Erreurs frequentes

  • Using sibling-index() in a property that does not accept numeric values — sibling-index() returns an integer and must be used in a context that supports number or integer values, such as calc() inside width, animation-delay, opacity, or z-index.
  • Assuming sibling-count() accounts for filtered or hidden elements — sibling-count() counts all sibling elements in the DOM regardless of display state. Hidden elements (display: none) are still counted. Use visibility: hidden instead if you need to exclude an element from the count visually without removing it from the sibling count.
  • Applying sibling-index() to a grid where items reorder at different breakpoints — sibling-index() reflects the DOM order, not the visual order. With CSS grid or flexbox reordering (order property), the index still follows the source order, which may not match the displayed layout.

Vérification

  1. Inspect a styled sibling element in Chrome DevTools and verify the computed value of the property using sibling-index() or sibling-count() matches the expected position and count.
  2. Add or remove sibling elements dynamically and confirm the styles update to reflect the new positions and total count without any code changes.

FAQ

Questions sur Generateur CSS sibling-index et sibling-count

Which browsers support sibling-index() and sibling-count()?

Chrome 138+ and Edge 138+. Firefox and Safari have not yet implemented sibling-index() or sibling-count() as of May 2026. For cross-browser support, use sibling-index() and sibling-count() as progressive enhancements with nth-child selectors or JavaScript as fallbacks.

How is sibling-index() different from nth-child?

nth-child matches selectors based on a pattern formula (2n+1, odd, 3n) and either selects or does not select an element. sibling-index() returns the actual numeric position as a value that you can use in calc() expressions. With nth-child you need separate rules for each position. With sibling-index() you write one rule that adapts to every position automatically.

Can I use sibling-count() to create inverse gradient effects?

Yes. Combine sibling-count() and sibling-index() in calc() to create inverse or reverse effects, such as decreasing opacity from first to last child: opacity: calc(1 - (sibling-index() - 1) / sibling-count()). The first child gets opacity 1, the last child approaches 0. As siblings are added or removed, the gradient recalculates automatically.

Outils lies

Autres outils outils css

A essayer aussi

A essayer aussi