sibling-count()

Limited availability

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

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

Hinweis: Die counter() Funktion liefert ein ähnliches Ergebnis, aber sie gibt 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 sibling-count() Funktion akzeptiert keine Parameter.

Rückgabewert

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

Beispiele

Dynamische Spaltenanzahl

Dieses Beispiel zeigt, wie die Anzahl der Spalten in einem Container auf die Anzahl seiner Kinder gesetzt wird, sodass jedes Kind in einer eigenen Spalte platziert wird.

HTML

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

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 seiner direkten Kinder. Wir setzen auch jedes ungerade Element, um eine background-color zu haben, um den 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