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 Gesamtanzahl der direkten Kind-DOM-Elemente des Elternelements darstellt, 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> liefert, das für Berechnungen verwendet werden kann.

Syntax

css

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

Parameter

Die sibling-count()-Funktion akzeptiert keine Parameter.

Rückgabewert

Ein Integer; die Gesamtanzahl der direkten Kind-DOM-Elemente.

Beispiele

Dynamische Spaltenanzahl

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

HTML

Wir fügen einen <ul>-Container und mehrere <li>-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. Außerdem erhält jedes ungerade Element eine background-color, um den resultierenden Effekt besser zu veranschaulichen.

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