CSS/Funktionen/sibling-count()

Browserunterstützung
caniuse.com

Die CSS-Funktion sibling-count() gibt die Anzahl der gleichrangigen DOM-Elemente an, auf das die Funktion angewendet wird, einschließlich des Elements selbst. Der Rückgabewert ist eine Ganzzahl, die z. B. in calc() für Berechnungen verwendet werden kann.

anwendbar auf

alle Elemente

Parameter

keine

Beispiel

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

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-count() 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-count (CSS Values and Units Module Level 5)
• MDN: sibling-count()
• Browser-Support: caniuse.com