CSS/Funktionen/sibling-index()

Browserunterstützung
caniuse.com

Die CSS-Funktion sibling-index() gibt eine Ganzzahl zurück, die die Position des aktuellen Elements im DOM-Baum relativ zu all seinen Geschwisterelementen angibt. Der zurückgegebene Wert ist die Indexnummer der Position des kontextuellen Kindes unter allen Geschwisterelementen innerhalb eines übergeordneten Elements, wobei das erste Kind den Wert 1 und das letzte Kind die Länge von Element.children zurückgibt.

anwendbar auf

alle Elemente

Parameter

keine

Beispiel

li {
  width: calc(100% / sibling-index());
}

Die Listenelemente werden über die gesamte Breite verteilt. Dies geschieht mit der calc()-Funktion, die die Breite durch die Anzahl der vorhandenen Elemente teilt.

Beachten Sie: Die counter()-Funktion liefert ein ähnliches Ergebnis, gibt jedoch einen <string> zurück (was für generierten Inhalt besser geeignet ist), während sibling-index() einen <integer> zurückgibt, der für Berechnungen verwendet werden kann.

Siehe auch

• Listen mit hybrider Nummerierung
• CSS zählt für dich
• Bildergalerie mit Grid Layout, deren Kindelemente sich an den verfügbaren Platz anpassen. Zur besseren Kennzeichnung der Reihenfolge im Markup wurden sie mit counter() nummeriert.

Weblinks

• CSSWG: # funcdef-sibling-index (CSS Values and Units Module Level 5)
• MDN: sibling-index()
• Browser-Support: caniuse.com