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 Geschwister-DOM-Elemente (direkte Kinder des Elternteils) des Elements darstellt, auf dem sie verwendet wird, einschließlich des Elements selbst.
Hinweis:
Die counter() Funktion liefert ein ähnliches Ergebnis, jedoch gibt sie einen <string> zurück (was besser für generierten 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 demonstriert, wie die Breite jedes Elements in einer Liste basierend auf der Anzahl der Elemente festgelegt wird, sodass jedes Kind in seiner eigenen Spalte platziert wird.
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, um eine background-color zu haben, 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…