Le CSS continue son évolution à grande vitesse. En mai 2026, deux nouvelles fonctions ont fait leur apparition dans les discussions de la communauté web : sibling-index() et sibling-count(). Ces deux ajouts, actuellement en cours de standardisation au CSSWG (CSS Working Group), promettent de simplifier radicalement la création de layouts dynamiques sans recourir à JavaScript ni à des sélecteurs nth-child illisibles.

Le problème que tout développeur connaît

Imaginez : vous devez créer une grille de cartes où chaque élément a un délai d’animation légèrement différent pour créer un effet de cascade. Ou bien vous voulez qu’une liste s’adapte visuellement selon qu’elle contient 3, 5 ou 12 éléments. Jusqu’à présent, les solutions étaient soit manuelles (écrire N règles nth-child), soit JavaScript (calculer les index et injecter des styles).

Voici un exemple typique de ce que l’on devait écrire pour un simple stagger effect :

/* L'ancienne méthode : nth-child à répétition */
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }
.card:nth-child(5) { animation-delay: 0.5s; }
/* ... jusqu'à combien ? 10 ? 20 ? 50 ? */

Non seulement c’est fastidieux, mais cela ne s’adapte pas dynamiquement au nombre d’éléments. Si votre liste passe de 5 à 15 éléments, vos délais sont cassés.

sibling-index() : connaître sa position dans la fratrie

La fonction sibling-index() renvoie la position (1-based) d’un élément parmi ses frères et sœurs dans le DOM. Elle s’utilise directement dans les propriétés CSS, notamment via calc() :

/* Avec sibling-index() : une seule ligne pour tout gérer */
.card {
  animation-delay: calc(sibling-index() * 0.08s);
}

Résultat : chaque carte reçoit automatiquement un délai proportionnel à sa position. La première carte démarre à 0.08s, la deuxième à 0.16s, la dixième à 0.8s. Et cela fonctionne quel que soit le nombre d’éléments, sans avoir à modifier votre CSS.

Cas d’usage concrets

1. Dégradé de couleurs progressif :

.list-item {
  background: hsl(
    calc(sibling-index() * 15),
    70%,
    calc(50% + sibling-index() * 3%)
  );
}

2. Translation progressive pour un effet de pile :

.stack-card {
  transform: 
    translateY(calc(sibling-index() * -4px))
    scale(calc(1 - sibling-index() * 0.02));
  z-index: calc(100 - sibling-index());
}

3. Largeur adaptative dans une flex row :

.flex-item {
  flex: calc(sibling-index() * 1);
  /* Premier élément : flex 1, deuxième : flex 2, etc. */
}

sibling-count() : adapter le layout au nombre d’éléments

La fonction sibling-count() renvoie le nombre total de frères et sœurs. C’est la solution élégante au problème du « je ne sais pas combien d’éléments ma boucle va générer ».

/* Ajuster la taille des cartes selon leur nombre */
.card {
  width: calc(100% / min(sibling-count(), 4));
  /* Si ≤ 4 éléments : chacun prend sa part */
  /* Si > 4 éléments : limité à 25% (4 par ligne) */
}

Le stagger effect parfait

En combinant les deux fonctions, on obtient des résultats puissants :

/* Animation d'entrée avec cascade inversée */
.card {
  animation: fadeInUp 0.5s both;
  animation-delay: calc(
    (sibling-count() - sibling-index()) * 0.06s
  );
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Ici, le dernier élément apparaît en premier, créant une cascade inversée du bas vers le haut. Sans JavaScript. Sans nth-child. En deux lignes de calcul.

Compatibilité et support navigateur

À date de juin 2026, sibling-index() et sibling-count() sont au stade de proposition avancée au CSSWG. Les implémentations expérimentales sont disponibles :

  • Chrome 130+ : disponible derrière le flag chrome://flags/#enable-experimental-web-platform-features
  • Firefox 132+ : support en nightly via layout.css.sibling-index.enabled
  • Safari Technology Preview : support partiel annoncé

En attendant le support universel, vous pouvez utiliser les deux fonctions avec une approche de progressive enhancement :

/* Fallback pour les navigateurs sans support */
.card {
  animation-delay: 0.1s; /* délai par défaut */
}

/* Enhancement pour les navigateurs modernes */
@supports (animation-delay: calc(sibling-index() * 0.1s)) {
  .card {
    animation-delay: calc(sibling-index() * 0.08s);
  }
}

Pourquoi c’est important

Ces deux fonctions incarnent une tendance de fond du développement web en 2026 : remettre la logique de présentation dans le CSS, là où elle a toujours dû être. Pendant des années, on a déporté cette intelligence dans JavaScript — avec des bibliothèques comme Anime.js, GSAP ou Framer Motion — simplement parce que CSS ne nous donnait pas les bons outils.

sibling-index() et sibling-count() s’inscrivent dans la même philosophie que Container Queries, :has(), et le nesting CSS : donner aux développeurs les moyens de créer des interfaces réactives et adaptatives sans dépendre d’un framework JavaScript.

Le gain est triple :

  1. Performance : pas de JavaScript au chargement pour gérer l’affichage
  2. Maintenabilité : une ligne de CSS remplace 50 lignes de nth-child
  3. Résilience : si JS est désactivé, le layout reste fonctionnel

Et la suite ?

Le CSSWG travaille également sur sibling-index() avec filtre, qui permettrait de ne compter que les frères correspondant à un sélecteur donné. Imaginez :

/* Compter uniquement les éléments visibles */
.visible-item {
  animation-delay: calc(sibling-index(.visible-item) * 0.1s);
}

Cela ouvrirait la porte à des layouts encore plus dynamiques, où le filtrage et l’ordre visuel seraient gérés nativement par le navigateur. Les spécifications sont encore en discussion, mais l’engouement de la communauté est palpable.

En résumé

sibling-index() et sibling-count() ne sont pas de simples gadgets CSS. Ce sont des outils fondamentaux qui comblent un vide que les développeurs contournaient depuis 15 ans avec des hacks nth-child et du JavaScript superflu. Si vous faites du frontend en 2026, testez-les dès maintenant derrière les flags expérimentaux : vous ne voudrez plus revenir en arrière.

Le web avance, et il avance bien.

Sources et références

{
« @context »: « https://schema.org »,
« @type »: « Article »,
« headline »: « sibling-index() et sibling-count() : les nouvelles fonctions CSS qui simplifient vos layouts »,
« datePublished »: « 2026-06-01 »,
« dateModified »: « 2026-06-01 »,
« url »: « https://wpadminlab.com/css-sibling-index-sibling-count-fonctions-layout-2026/ »,
« publisher »: {
« @type »: « Organization »,
« name »: « WP Admin Lab »
}
}

📖 À lire aussi : Pipeline ETL moderne avec Airbyte, dbt et PostgreSQL : le guide complet 2026

W
WP Admin Lab

Architecte web full-stack. WordPress, performance, data et sécurité. Notes de terrain, tests reproductibles et retours d'expérience.