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 Ganzzahl 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 Kindes unter allen Geschwisterelementen innerhalb eines Elternelements, wobei das erste Kind 1 zurückgibt und das letzte Kind die Länge von Element.children.

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: #fff;
  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

css

li {
  width: calc(sibling-index() * 100px);
}

Parameter

Die sibling-index() Funktion akzeptiert keine Parameter.

Rückgabewert

Eine Ganzzahl; die Position des aktuellen Elements in der Geschwisterordnung des DOM-Baums.

Beispiele

Dynamische Listenbreite

Dieses Beispiel zeigt, wie die Breite jedes <li>-Elements in der <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: #faa;
}

Ergebnisse

Geordnete Liste

Dieses Beispiel demonstriert, wie eine geordnete Liste mit sibling-index() erstellt wird, ohne das <ol> Element zu verwenden. Verwenden Sie immer das semantisch passendste Element für den Kontext; dieses Beispiel ist enthalten, um zu zeigen, was mit CSS möglich ist, wenn Sie das HTML nicht ändern können.

HTML

Wir fügen einen <nav>-Container und mehrere Kinder-<div>-Elemente ein.

html

<nav arial-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 erscheinen, indem wir den sibling-index vor jedem <div>-Element mit dem ::before Pseudoelement anzeigen und den content so setzen, dass der ganzzahlige Wert verwendet wird, der von der sibling-index()-Funktion zurückgegeben wird.

css

div {
  --list-index: sibling-index();
  display: flex;
  gap: 1ch;
}

div::before {
  content: var(--list-index);
}

Ergebnisse

Sequenzielle Animationen

Die Kombination von sibling-index() mit CSS-Animationen eröffnet neue Möglichkeiten. In diesem Beispiel wird die Deckkraft von Elementen in sequentieller Reihenfolge durch das Setzen einer animation-delay basierend auf ihrer Reihenfolge im DOM verändert.

HTML

Wir schließen ein Container-Element 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 Quellenelements in der Quellreihenfolge festzulegen. Der animation-fill-mode wendet den 0%-Schlüsselbildschirm 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;
  }
}

Ergebnisse

Spezifikationen

Specification
CSS Values and Units Module Level 5 # funcdef-sibling-index

Browser-Kompatibilität

Siehe auch

sibling-count()