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 Gesamtzahl der direkten untergeordneten DOM-Elemente des Elternelements darstellt, auf dem sie verwendet wird.
Hinweis:
Die Funktion counter()
liefert ein ähnliches Ergebnis, jedoch gibt sie einen <string>
zurück, während sibling-count()
ein <integer>
zurückgibt, das für Berechnungen verwendet werden kann.
Syntax
--total-sibling-elements: sibling-count();
Parameter
Die Funktion sibling-count()
akzeptiert keine Parameter.
Rückgabewert
Eine ganze Zahl; die Gesamtzahl der direkten untergeordneten DOM-Elemente.
Beispiele
Dynamische Spaltenanzahl
Dieses Beispiel zeigt, wie die Anzahl der Spalten in einem Container auf die Anzahl seiner Kinder eingestellt wird, wodurch jedes Kind in seiner eigenen Spalte platziert werden kann.
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>
</ul>
CSS
Wir setzen die column-count
des Containers gleich der Anzahl der direkten Kinder, die er enthält. Wir setzen auch jedes ungerade Element auf eine background-color
, um den daraus resultierenden Effekt besser zu demonstrieren.
ul {
column-count: sibling-count();
text-align: center;
list-style-type: none;
padding: 0;
margin: 0;
}
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 |