sibling-index()
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-index() CSS Funktion gibt eine ganze Zahl zurück, die die Position des aktuellen Elements im DOM-Baum relativ zu allen seinen Geschwisterelementen darstellt. Der zurückgegebene Wert ist die Indexnummer der Position des kontextbezogenen Kindes unter allen Geschwisterelementen innerhalb eines Elternelements, wobei das erste Kind 1 zurückgibt und das letzte Kind Element.children.length zurückgibt.
Probieren Sie es aus
--width: calc(sibling-index() * 30px);
--width: calc(sibling-index() * 20px);
--width: calc(sibling-index() * 10px);
--width: 100px;
<ul id="example-element">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
#example-element {
list-style-type: none;
padding: 0;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
#example-element > li {
text-align: center;
padding: 2px;
border-radius: 8px;
width: var(--width, calc(sibling-index() * 30px));
color: white;
background-color: hsl(
calc(360deg / sibling-count() * sibling-index()) 50% 50%
);
}
Hinweis:
Wie die :nth-child() Pseudoklasse beginnt sibling-index() bei 1, nicht bei 0.
Syntax
sibling-index()
Parameter
Die sibling-index() Funktion akzeptiert keine Parameter.
Rückgabewert
Eine ganze Zahl; die Position des aktuellen Elements in der Geschwister-Reihenfolge des DOM-Baums.
Beispiele
Dynamische Listenbreite
Dieses Beispiel zeigt, wie die Breite jedes <li> Elements in der <ul> dynamisch um 50px erhöht werden kann.
HTML
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
CSS
li {
width: calc(sibling-index() * 50px);
background-color: #ffaaaa;
}
Ergebnisse
Geordnete Liste
Dieses Beispiel zeigt, wie eine geordnete Liste ohne Verwendung des <ol> Elements mit sibling-index() erstellt werden kann. Verwenden Sie immer das semantisch passendste Element für den Kontext; dieses Beispiel zeigt, was mit CSS gemacht werden kann, wenn Sie das HTML nicht ändern können.
HTML
Wir fügen einen <nav> Container und mehrere <div> Kind-Elemente ein.
<nav aria-label="Ordered list">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</nav>
CSS
Wir lassen es visuell wie eine nummerierte Liste aussehen, indem der sibling-index vor jedem <div> Element mit dem ::before Pseudoelement angezeigt wird. Dabei wird der content auf die von der sibling-index() Funktion zurückgegebene ganze Zahl gesetzt.
div {
--list-index: sibling-index();
display: flex;
gap: 1ch;
}
div::before {
content: var(--list-index);
}
Ergebnisse
Sequentielle Animationen
Durch die Kombination von sibling-index() mit CSS-Animationen eröffnen sich neue Möglichkeiten. In diesem Beispiel wird die Deckkraft von Elementen in der Reihenfolge des DOM durch Setzen einer animation-delay basierend auf ihrer Reihenfolge verändert.
HTML
Wir fügen ein Containerelement mit vier Kind-Elementen ein:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
CSS
Wir wenden die fade-in Animation auf jedes Element an. Wir verwenden die sibling-index() Funktion innerhalb einer calc() Funktion, um die Dauer der animation-delay basierend auf der Position des Quell-Elements im Quellauftrag festzulegen. Der animation-fill-mode wendet den 0% Keyframe der Animation an, bis die animation-duration abgelaufen ist.
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
animation-name: fade-in;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: backwards;
animation-delay: calc(1s * sibling-index());
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Ergebnisse
Spezifikationen
| Specification |
|---|
| CSS Values and Units Module Level 5 # funcdef-sibling-index |
Browser-Kompatibilität
Loading…