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 Gesamtanzahl der Geschwister-DOM-Elemente (direkte Kinder des Elternteils) des Elements darstellt, auf das sie angewendet wird, einschließlich des Elements selbst.
Hinweis:
Die counter() Funktion liefert ein ähnliches Ergebnis, gibt jedoch eine <string> zurück, während sibling-count() ein <integer> zurückgibt, welches für Berechnungen verwendet werden kann.
Syntax
sibling-count()
Parameter
Die sibling-count() Funktion akzeptiert keine Parameter.
Rückgabewert
Eine Ganzzahl; die Gesamtanzahl der Geschwister-DOM-Elemente einschließlich des Elements selbst.
Beispiele
Dynamische Spaltenanzahl
Dieses Beispiel zeigt, wie die Breite jedes Eintrags in einer Liste basierend auf der Anzahl der Einträge festgelegt wird, sodass jedes Kind in einer eigenen Spalte platziert wird.
HTML
Wir fügen einen <ul> Container und mehrere <li> Elemente als Kinder 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. Wir setzen auch jedes ungerade Element auf eine andere 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 |
Browser-Kompatibilität
Loading…