sibling-count()

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die sibling-count() CSS Funktion gibt eine ganze Zahl zurück, die die Gesamtzahl der direkten untergeordneten DOM-Elemente des Elternelements darstellt, auf dem sie verwendet wird.

Hinweis: Die Funktion counter() liefert ein ähnliches Ergebnis, jedoch gibt sie einen <string> zurück, während sibling-count() ein <integer> zurückgibt, das für Berechnungen verwendet werden kann.

Syntax

css

--total-sibling-elements: sibling-count();

Parameter

Die Funktion sibling-count() akzeptiert keine Parameter.

Rückgabewert

Eine ganze Zahl; die Gesamtzahl der direkten untergeordneten DOM-Elemente.

Beispiele

Dynamische Spaltenanzahl

Dieses Beispiel zeigt, wie die Anzahl der Spalten in einem Container auf die Anzahl seiner Kinder eingestellt wird, wodurch jedes Kind in seiner eigenen Spalte platziert werden kann.

HTML

Wir fügen einen <ul> Container und mehrere <li> Elemente als Kinder ein.

html

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

CSS

Wir setzen die column-count des Containers gleich der Anzahl der direkten Kinder, die er enthält. Wir setzen auch jedes ungerade Element auf eine background-color, um den daraus resultierenden Effekt besser zu demonstrieren.

css

ul {
  column-count: sibling-count();
  text-align: center;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li:nth-of-type(odd) {
  background-color: rgb(0 0 0 / 0.05);
}

Ergebnisse

Spezifikationen

Specification
CSS Values and Units Module Level 5 # funcdef-sibling-count