sibling-count() CSS-Funktion
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Die sibling-count() CSS Funktion gibt eine ganze Zahl zurück, die die Gesamtanzahl der Geschwister-DOM-Elemente (direkte Kinder des Elternteils) des Elements, auf das sie angewendet wird, einschließlich des Elements selbst, darstellt.
Hinweis:
Die counter()-Funktion liefert ein ähnliches Ergebnis, aber sie gibt eine <string> zurück (was besser für erzeugten Inhalt geeignet ist), während sibling-count() ein <integer> zurückgibt (das für Berechnungen verwendet werden kann).
Syntax
sibling-count()
Parameter
Die sibling-count()-Funktion akzeptiert keine Parameter.
Rückgabewert
Eine ganze Zahl; die Gesamtanzahl der Geschwister-DOM-Elemente einschließlich des Elements selbst.
Beispiele
Dynamische Spaltenanzahl
Dieses Beispiel zeigt, wie die Breite jedes Elements in einer Liste basierend auf der Anzahl der Elemente gesetzt wird, wodurch jedes Kind in seine eigene Spalte platziert werden kann.
HTML
Wir fügen einen <ul>-Container und mehrere <li>-Elemente als Kinder hinzu.
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
CSS
Wir teilen die width jedes Listenelements durch die Anzahl der direkten Kinder, die die Liste enthält. Wir setzen auch jedes ungerade Element mit einer background-color, um den Effekt besser zu veranschaulichen.
ul {
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
display: flex;
}
li {
width: calc(100% / sibling-count());
}
li:nth-of-type(odd) {
background-color: rgb(0 0 0 / 0.05);
}
Ergebnisse
Spezifikationen
| Spezifikation |
|---|
| CSS Values and Units Module Level 5 # funcdef-sibling-count |