Fonction CSS `sibling-index()`

Disponibilité limitée

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

La fonction CSS sibling-index() retourne un entier représentant la position actuelle de l'élément dans l'arbre DOM par rapport à tous ses éléments voisins. La valeur retournée est le numéro d'indice de la position de l'enfant contextuel parmi tous les éléments voisins au sein d'un élément parent, le premier enfant retournant 1 et le dernier enfant retournant la longueur de Element.children.

Note : Comme la pseudo-classe :nth-child(), sibling-index() commence à 1, et non à 0.

Note : La fonction counter() fournit un résultat similaire mais retourne une chaîne de caractères (<string>) (ce qui est plus adapté pour le contenu généré), tandis que sibling-index() retourne un entier (<integer>) (qui peut être utilisé pour des calculs).

Exemple interactif

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

Syntaxe

css

sibling-index()

Paramètres

La fonction sibling-index() n'accepte aucun paramètre.

Valeur de retour

Un entier ; la position de l'élément actuel dans l'ordre des éléments voisins de l'arbre DOM.

Exemples

Largeur de liste dynamique

Cet exemple montre comment augmenter dynamiquement la largeur de chaque élément HTML <li> dans le <ul> de 50px.

HTML

html

<ul>
  <li>Un</li>
  <li>Deux</li>
  <li>Trois</li>
  <li>Quatre</li>
</ul>

CSS

css

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

Résultat

Animations séquentielles

Combiner sibling-index() avec les animations CSS ouvre de nouvelles possibilités. Dans cet exemple, l'opacité des éléments est animée dans l'ordre séquentiel en définissant un animation-delay basé sur leur position dans le DOM.

HTML

Nous incluons un conteneur avec quatre enfants :

html

<ul>
  <li>Un</li>
  <li>Deux</li>
  <li>Trois</li>
  <li>Quatre</li>
</ul>

CSS

Nous appliquons l'animation fade-in à chaque élément. Nous utilisons la fonction sibling-index() dans une fonction calc() pour définir la durée de l'animation (animation-delay) en fonction de la position de l'élément dans l'ordre source. Le mode de remplissage de l'animation (animation-fill-mode) applique une image clé à 0% de l'animation jusqu'à ce que la animation-duration expire.

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