jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils CSS

Gratuit Generateur CSS sibling-index et sibling-count

Generez du CSS avec sibling-index() et sibling-count() pour un stylage base sur la position DOM sans selecteurs nth-child.

Chargement de l'outil...

Qu'est-ce que Generateur CSS sibling-index et sibling-count ?

sibling-index() et sibling-count() sont des fonctions CSS (Chrome 138+) qui exposent la position DOM d'un element parmi ses frères. sibling-index() retourne un entier base sur 1 representant la position de l'element. sibling-count() retourne le nombre total d'elements frères. Contrairement aux selecteurs nth-child qui correspondent a des modeles statiques, ces fonctions produisent des valeurs numeriques dynamiques que vous pouvez utiliser dans calc() pour n'importe quelle propriete acceptant un nombre ou un entier.

Réponse rapide

sibling-index() retourne la position basee sur 1 d'un element parmi ses frères, et sibling-count() retourne le nombre total de frères. Utilisez-les dans calc() pour creer des delais d'echelonnement, des cycles de couleurs, des degradés de largeur et des décalages de position qui s'adaptent automatiquement lorsque le DOM change -- sans selecteurs nth-child ni JavaScript.

Last updated: 2026-05-30

Limites

  • sibling-index() et sibling-count() necessitent Chrome 138+. Firefox et Safari ne prennent pas encore en charge ces fonctions en mai 2026.
  • Les fonctions retournent l'ordre DOM, pas l'ordre visuel. Les elements réordonnés avec la propriete CSS flexbox order ou le placement grid peuvent avoir un index qui ne correspond pas a leur position visuelle.
  • sibling-count() inclut tous les frères DOM, y compris ceux masques avec display: none. Utilisez visibility: hidden pour masquer visuellement un element sans le retirer du decompte des frères.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Selectionnez la propriete que vous souhaitez rendre sensible a la position, comme animation-delay, background-color, width, opacity ou z-index.
  2. Choisissez la fonction frère : sibling-index() pour le positionnement par element ou sibling-count() pour la mise a l'echelle en fonction du conteneur.
  3. Construisez une expression utilisant calc() pour transformer l'index brut en plage de valeurs souhaitee.
  4. Copiez le CSS genere et appliquez-le aux elements enfants qui necessitent un style sensible a la position.

A quoi il sert

  • Creer des delais d'animation échelonnés ou chaque element s'anime sequentiellement en fonction de sa position parmi ses frères.
  • Construire un cycle de couleurs qui tourne automatiquement a travers une palette en fonction de l'index de l'element.
  • Generer un degradé de largeur ou de hauteur entre des elements frères sans regles manuelles nth-child.

Cas d'usage

Exemples concrets

Exemple

Animation de liste échelonnée

Une liste verticale d'elements apparaît en fondu un par un. Appliquez animation-delay: calc(sibling-index() * 0.1s) a chaque element. Le premier element a un delai de 0.1s, le deuxieme 0.2s, etc. Lorsque des elements sont ajoutes ou supprimes, les delais s'ajustent automatiquement.

Exemple

Cyclage des couleurs entre les cartes

Une grille de cartes cycle a travers trois couleurs d'accentuation. Appliquez background: hsl(calc(sibling-index() * 120deg), 70%, 50%). Chaque carte reçoit une teinte décalée de 120 degrés par rapport a la precedente, produisant un cycle de couleurs naturel sans selecteurs nth-child.

Erreurs frequentes

  • Utiliser sibling-index() dans une propriete qui n'accepte pas de valeurs numeriques -- sibling-index() retourne un entier et doit etre utilise dans un contexte qui prend en charge les nombres ou les entiers.
  • Supposer que sibling-count() tient compte des elements filtres ou masques -- sibling-count() compte tous les elements frères dans le DOM, independamment de l'etat d'affichage.
  • Appliquer sibling-index() a une grille ou les elements se réordonnent a différents points d'arret -- sibling-index() reflete l'ordre DOM, pas l'ordre visuel.

Vérification

  1. Inspectez un element frère stylise dans Chrome DevTools et verifiez que la valeur calculee de la propriete utilisant sibling-index() ou sibling-count() correspond a la position et au nombre attendus.
  2. Ajoutez ou supprimez des elements frères dynamiquement et confirmez que les styles se mettent a jour pour refleter les nouvelles positions et le nouveau nombre total sans aucune modification de code.

FAQ

Questions sur Generateur CSS sibling-index et sibling-count

Quels navigateurs prennent en charge sibling-index() et sibling-count() ?

Chrome 138+ et Edge 138+. Firefox et Safari n'ont pas encore implemente ces fonctions en mai 2026. Utilisez-les comme amélioration progressive avec des selecteurs nth-child ou JavaScript comme solutions de repli.

En quoi sibling-index() diffère-t-il de nth-child ?

Nth-child fait correspondre des selecteurs base sur une formule de modele et selectionne ou non un element. sibling-index() retourne la position numerique reelle comme valeur que vous pouvez utiliser dans des expressions calc().

Puis-je utiliser sibling-count() pour creer des effets de degradé inverses ?

Oui. Combinez sibling-count() et sibling-index() dans calc() pour creer des effets inverses, comme une opacite décroissante du premier au dernier enfant : opacity: calc(1 - (sibling-index() - 1) / sibling-count()).

Outils lies

Autres outils outils css

A essayer aussi

A essayer aussi