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 Elternteils) des Elements darstellt, auf dem sie angewendet wird, einschließlich des Elements selbst.
Hinweis:
Die counter() Funktion liefert ein ähnliches Ergebnis, gibt jedoch einen <string> zurück (was besser für generierten Inhalt geeignet ist), während sibling-count() ein <integer> zurückgibt (der 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, sodass jedes Kind in seiner eigenen 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 auf eine andere background-color, um den 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…