`sibling-index()` CSS-Funktion

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Want more browser support for this feature? Tell us why.

Mehr erfahren
Vollständige Kompatibilität anzeigen

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 kontextuellen Kinds unter allen Geschwisterelementen innerhalb eines Elternelements, wobei das erste Kind 1 zurückgibt und das letzte Kind die length von Element.children zurückgibt.

Hinweis: Wie die :nth-child() Pseudoklasse beginnt sibling-index() bei 1, nicht bei 0.

Hinweis: Die counter() Funktion liefert ein ähnliches Ergebnis, gibt jedoch einen <string> zurück (was besser für generierte Inhalte geeignet ist), während sibling-index() einen <integer> zurückgibt (der für Berechnungen verwendet werden kann).

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%
  );
}

Syntax

css

sibling-index()

Parameter

Die sibling-index() Funktion akzeptiert keine Parameter.

Rückgabewert

Ein Integer; die Position des aktuellen Elements in der Geschwisterreihenfolge des DOM-Baums.

Beispiele

Dynamische Listenbreite

Dieses Beispiel zeigt, wie die Breite jedes <li>-Elements in einem <ul> dynamisch um 50px erhöht wird.

HTML

html

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

CSS

css

li {
  width: calc(sibling-index() * 50px);
  background-color: #ffaaaa;
}

Ergebnisse

Sequentielle Animationen

Die Kombination von sibling-index() mit CSS-Animationen eröffnet neue Möglichkeiten. In diesem Beispiel wird die Opazität von Elementen in sequentieller Reihenfolge angepasst, indem eine animation-delay basierend auf ihrer Reihenfolge im DOM festgelegt wird.

HTML

Wir fügen ein Containerelement mit vier Kindern ein:

html

<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 Quellaufbau festzulegen. Das animation-fill-mode wendet den 0% Keyframe der Animation an, bis die animation-duration abläuft.

css

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;
  }
}