sibling-index()

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die sibling-index() CSS Funktion gibt eine Ganzzahl zurück, die die Position des aktuellen Elements im DOM-Baum relativ zu all 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, Element.children.length.

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: Genau wie die Pseudoklasse :nth-child() 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 Geschwisterreihenfolge des DOM-Baums.

Beispiele

Dynamische Listenbreite

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

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 zeigt, wie man eine geordnete Liste mit sibling-index() erstellt, ohne das <ol> Element zu verwenden. Verwenden Sie stets das am besten semantische Element für den Kontext; dieses Beispiel dient zur Demonstration dessen, was man mit CSS machen kann, wenn man das HTML nicht ändern kann.

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 Wert auf die Ganzzahl setzen, die von der Funktion sibling-index() zurückgegeben wird.

css

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

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

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 basierend auf ihrer Reihenfolge im DOM mit einem animation-delay gesetzt.

HTML

Wir fügen 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 des animation-delay basierend auf der Position des Quell-Elements in der Quell-Reihenfolge festzulegen. Der 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;
  }
}

Ergebnisse

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

sibling-count()