Was ist CSS Sibling-Index und -Count Generator?
sibling-index() und sibling-count() sind CSS-Funktionen (Chrome 138+), die die DOM-Position eines Elements unter seinen Geschwistern anzeigen. sibling-index() gibt einen 1-basierten Integer der Position zurück. sibling-count() gibt die Gesamtzahl der Geschwisterelemente zurück. Im Gegensatz zu nth-child-Selektoren, die statische Muster abgleichen, liefern diese Funktionen dynamische Zahlenwerte.
Kurze Antwort
sibling-index() gibt die 1-basierte Position eines Elements unter seinen Geschwistern zurück, sibling-count() die Gesamtzahl. Verwenden Sie sie in calc() für Staffelungsverzögerungen, Farbzyklen, Breitengradienten und Positionsverschiebungen - ohne nth-child-Selektoren oder JavaScript.
Last updated: 2026-05-30
Einschränkungen
- sibling-index() und sibling-count() erfordern Chrome 138+. Firefox und Safari unterstützen diese Funktionen Stand Mai 2026 nicht.
- Die Funktionen geben die DOM-Reihenfolge zurück, nicht die visuelle Reihenfolge.
- sibling-count() zählt alle DOM-Geschwister, einschließlich solcher mit display: none.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
So nutzt du dieses Tool
- Wählen Sie die Eigenschaft, die positionsabhängig werden soll, wie animation-delay, background-color, width oder z-index.
- Wählen Sie die Geschwisterfunktion: sibling-index() für die Elementposition oder sibling-count() für containerbewusste Skalierung.
- Erstellen Sie einen Ausdruck mit calc(), um den Roh-Index in den gewünschten Wertebereich zu transformieren.
- Kopieren Sie das generierte CSS und wenden Sie es auf die Kind-Elemente an.
Wofür du es nutzen kannst
- Erstellen Sie gestaffelte Animationsverzögerungen, bei denen jedes Element nacheinander animiert.
- Bauen Sie einen Farbzyklus, der automatisch durch eine Palette basierend auf dem Element-Index rotiert.
- Generieren Sie einen Breiten- oder Höhen-Gradienten über Geschwisterelemente.