jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-tools

Gratis CSS Sibling-index en Sibling-count Generator

Genereer CSS met sibling-index() en sibling-count() voor positiegebaseerde styling zonder nth-child-selectors.

Tool laden...

Wat is CSS Sibling-index en Sibling-count Generator?

sibling-index() en sibling-count() zijn CSS-functies (Chrome 138+) die de DOM-positie van een element ten opzichte van zijn siblings weergeven. sibling-index() retourneert een 1-gebaseerd geheel getal dat de positie van het element vertegenwoordigt. sibling-count() retourneert het totale aantal sibling-elementen. In tegenstelling tot nth-child-selectors die statische patronen matchen, produceren deze functies dynamische numerieke waarden die u kunt gebruiken in calc() voor elke eigenschap die een getal of geheel getal accepteert. Dit maakt stagger-vertragingen, afwisselende kleuren, breedtegradiënten en automatische gelaagdheid mogelijk zonder hardgecodeerde selectors.

Snel antwoord

sibling-index() retourneert de 1-gebaseerde positie van een element tussen zijn siblings, en sibling-count() retourneert het totale aantal siblings. Gebruik ze in calc() om stagger-vertragingen, kleurcycli, breedtegradiënten en positieverschuivingen te creëren die zich automatisch aanpassen wanneer het DOM verandert. Geen nth-child-selectors of JavaScript nodig.

Last updated: 2026-05-30

Beperkingen

  • sibling-index() en sibling-count() vereisen Chrome 138+. Firefox en Safari ondersteunen deze functies per mei 2026 nog niet.
  • De functies retourneren DOM-volgorde, niet visuele volgorde. Elementen die zijn herordend met CSS flexbox order of grid-plaatsing kunnen een index hebben die niet overeenkomt met hun visuele positie.
  • sibling-count() omvat alle DOM-siblings, inclusief die verborgen met display: none. Gebruik visibility: hidden om een element visueel te verbergen zonder het uit de sibling-telling te verwijderen.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

  1. Selecteer de eigenschap die positieafhankelijk moet worden, zoals animation-delay, background-color, width, opacity of z-index.
  2. Kies de sibling-functie: sibling-index() voor positie per element of sibling-count() voor container-bewuste schaling.
  3. Bouw een expressie met calc() om de ruwe index om te zetten naar het gewenste waardebereik.
  4. Kopieer de gegenereerde CSS en pas deze toe op de onderliggende elementen die positieafhankelijke styling nodig hebben.

Waarvoor je het kunt gebruiken

  • Creëer stagger-animatievertragingen waarbij elk item sequentieel animeert op basis van zijn positie tussen siblings.
  • Bouw een kleurcyclus die automatisch door een palet roteert op basis van de elementindex.
  • Genereer een breedte- of hoogtegradiënt over sibling-elementen zonder handmatige nth-child-regels.

Gebruik

Praktische voorbeelden

Voorbeeld

Gestaffelde lijstanimatie

Een verticale lijst met items vervaagt een voor een in. Pas animation-delay: calc(sibling-index() * 0.1s) toe op elk item. Het eerste item heeft een vertraging van 0,1s, het tweede 0,2s, enzovoort. Wanneer items worden toegevoegd of verwijderd, passen de vertragingen zich automatisch aan.

Voorbeeld

Kleurcycli over kaarten

Een kaartraster doorloopt drie accentkleuren. Pas background: hsl(calc(sibling-index() * 120deg), 70%, 50%) toe. Elke kaart krijgt een tint die 120 graden is gedraaid ten opzichte van de vorige, wat een natuurlijke kleurcyclus produceert zonder nth-child-selectors.

Veelgemaakte fouten

  • sibling-index() gebruiken in een eigenschap die geen numerieke waarden accepteert. sibling-index() retourneert een geheel getal en moet worden gebruikt in een context die getallen of gehele getallen ondersteunt, zoals calc() binnen width, animation-delay, opacity of z-index.
  • Aannemen dat sibling-count() rekening houdt met gefilterde of verborgen elementen. sibling-count() telt alle sibling-elementen in het DOM, ongeacht de weergavestatus. Verborgen elementen (display: none) worden nog steeds geteld. Gebruik visibility: hidden als u een element visueel wilt verbergen zonder het uit de sibling-telling te verwijderen.
  • sibling-index() toepassen op een grid waar items worden herordend bij verschillende breekpunten. sibling-index() weerspiegelt de DOM-volgorde, niet de visuele volgorde. Bij herordening met CSS grid of flexbox (order-eigenschap) volgt de index nog steeds de bronvolgorde, die mogelijk niet overeenkomt met de weergegeven lay-out.

Verificatie

  1. Inspecteer een gestyled sibling-element in Chrome DevTools en controleer of de berekende waarde van de eigenschap met sibling-index() of sibling-count() overeenkomt met de verwachte positie en telling.
  2. Voeg sibling-elementen dynamisch toe of verwijder ze en bevestig dat de stijlen worden bijgewerkt om de nieuwe posities en totale telling weer te geven zonder code wijzigingen.

FAQ

Vragen over CSS Sibling-index en Sibling-count Generator

Welke browsers ondersteunen sibling-index() en sibling-count()?

Chrome 138+ en Edge 138+. Firefox en Safari hebben sibling-index() en sibling-count() per mei 2026 nog niet geïmplementeerd. Gebruik sibling-index() en sibling-count() als progressive enhancements met nth-child-selectors of JavaScript als fallbacks.

Hoe verschilt sibling-index() van nth-child?

nth-child matcht selectors op basis van een patroonformule (2n+1, odd, 3n) en selecteert een element wel of niet. sibling-index() retourneert de werkelijke numerieke positie als een waarde die u kunt gebruiken in calc()-expressies. Met nth-child heeft u aparte regels nodig voor elke positie. Met sibling-index() schrijft u één regel die zich automatisch aanpast aan elke positie.

Kan ik sibling-count() gebruiken om inverse gradienteffecten te creëren?

Ja. Combineer sibling-count() en sibling-index() in calc() om inverse of omgekeerde effecten te creëren, zoals afnemende opacity van eerste naar laatste kind: opacity: calc(1 - (sibling-index() - 1) / sibling-count()). Het eerste kind krijgt opacity 1, het laatste kind nadert 0. Wanneer siblings worden toegevoegd of verwijderd, wordt het gradiënt automatisch herberekend.

Gerelateerde tools

Meer css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Open tool

Probeer ook

Probeer ook

Html

CSP Hash Generator

Genereer CSP-hashwaarden voor inline scripts en styles. Hash exacte code met SHA-256, SHA-384 of SHA-512.

Open tool