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 Ganzzahl zurück, die die Gesamtzahl der Geschwister-DOM-Elemente (direkte Kinder des übergeordneten Elements) des Elements, auf dem sie angewendet wird, einschließlich des Elements selbst darstellt.
Hinweis:
Die Funktion counter() liefert ein ähnliches Ergebnis, aber sie gibt einen <string> zurück (was für erzeugten Inhalt besser geeignet ist), während sibling-count() ein <integer> zurückgibt (was für Berechnungen verwendet werden kann).
Syntax
sibling-count()
Parameter
Die sibling-count() Funktion akzeptiert keine Parameter.
Rückgabewert
Eine Ganzzahl; die Gesamtzahl 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 festgelegt wird, wodurch jedes Kind in seiner eigenen Spalte platziert werden kann.
HTML
Wir fügen einen <ul>-Container und mehrere <li>-Elementkinder ein.
<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. Außerdem setzen wir jedes ungerade Element auf eine background-color, um den resultierenden Effekt besser zu demonstrieren.
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
| Specification |
|---|
| CSS Values and Units Module Level 5 # funcdef-sibling-count |