Les fonctions CSS sibling-count() et sibling-index().

sibling-count()

sibling-index()

Résumé des caractéristiques de la fonction `sibling-count()`

Description rapide

Renvoie le nombre de frères de l'élément dans l'arbre du document, y compris l'élément lui-même.

Statut

Problèmes de compatibilité ⚠

Pourcentages

Ne s'appliquent pas.

Module W3C

Module CSS - Valeurs et unités

Références (W3C)

CSS Values and Units Module Level 5

Statut du document: WD (document de travail)

Description de `sibling-index()` et `sibling-count()`.

⚠

Ces fonctions sont encore peu reconnues par les navigateurs (2025). A utiliser avec prudence.

Ces deux fonctions ont rapport avec le comptage des frères dans l'arbre du document, c'est à dire des éléments qui ont le même parent. Elles renvoient toutes les deux un nombre entier.

sibling-count() : Renvoie le nombre de frères de l'élément dans l'arbre du document, y compris l'élément lui-même.
sibling-index() : Renvoie le numéro de l'élément parmi ses frères, c'est à dire des autres éléments qui ont le même parent.

Usage de `sibling-index()` et `sibling-count()`.

Ces deux fonctions peuvent être utilisées directement avec toute propriété qui attend un entier. Cependant, en passant par calc(), il est possible de changer le type de la valeur. On peut alors utiliser ces fonctions avec toutes les propriétés qui attendent une valeur numérique.

Exemple : width: calc(1px * sibling-index());

Syntaxe des fonctions `sibling-index()` et `sibling-count()`.

<property>: sibling-count();

sibling-count() donne le nombre de frère de l'élément, cet élément y compris.

Dans l'exemple ci-dessous, nous avons un flex-box. La largeur des éléments est 'autant plus faible qu'ils sont nombreux.

⚠ Cela ne fonctionne que sur certains navigateurs.

Un

Deux

Trois

flex-basis:calc(100% / sibling-count());
<property>: sibling-index();

sibling-index() renvoie le numéro d'ordre de l'élément parmi ses frères. sibling-index() ne peut donc pas renvoyer 0.

Dans notre exemple ci-dessous, on multiplie sibling-index() par une longueur, ce qui donne une longueur en résultat. Celle-ci est utilisée avec la propriété width pour donner une largeur qui augmente avec le numéro d'ordre.

⚠ Cela ne fonctionne que sur certains navigateurs.

Un

Deux

Trois

width:calc(50px * sibling-index());

Support de `sibling-count()` et `sibling-index()`.

Les deux fonctions sibling-index() et sibling-count() sont encore mal reconnues par les grands navigateurs (2025). Seuls les navigateurs webkit, tels que Edge , Chrome et Opera , les traitent correctement.

Colonne 1

Interprêtation correcte par les navigateurs de la fonction sibling-index qui fournit la position de l'élément parmi ses frères.

Colonne 2

Interprêtation correcte par les navigateurs de la fonction sibling-count() qui donne le nombre de frères que possède l'élément (incluant lui-même).

Fonction
sibling-index()

Fonction
sibling-count()

Estimation de la prise en charge globale.

66%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Chrome

Edge

Safari

Opéra

Chrome pour Androïd

Safari sur IOS

Androïd Brower

Firefox pour Androïd

Firefox

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de `sibling-count()` et `sibling-index()`.

Module CSS - Valeurs et unités - Niveau 5

Introduction des deux fonctions sibling-count() et sibling-index() qui effectuent un comptage d'éléments dans l'arbre du document.

03 Septembre 2024
Document de travail.

Voir aussi : autres valeurs et unités.

Le module CSS Values and Units Module auquel appartiennent ces deux fonctions regroupe de nombreuses fonctions de calcul (mathématiques, trigonométriques), ou quelques valeurs prédéfinies.

Propriétés :

⚠

interpolate-size

Définit si les animations ou les transitions doivent être brutales ou progressives lorsqu'un mot clé définissant une dimension intrinsèque est utilisé.

Fonctions :

abs()

Calcule la valeur absolue d'un nombre.

acos()

Calcule l'angle dont le cosinus vaut la valeur indiquée.

asin()

Calcule l'angle dont le sinus vaut la valeur indiquée.

atan()

Calcule l'angle dont la tangente vaut la valeur indiquée.

atan2()

Calcule l'angle entre l'axe des abscisses et la droite reliant le point origine au point indiqué.

attr()

Renvoie la valeur d'un attribut (standard ou personnalisé) du code HTML ou XML.

calc()

Effectue un calcul. Peut être utilisé à la place d'une valeur pour une propriété.

⚠

calc-size()

calc-size() permet de faire des calculs sur la dimension intrinsèque d'un élément (définie par le contenu).

clamp()

Calcule une valeur entre deux valeurs extrêmes. Cette fonction est intéressante lorsque les unités des paramètres sont différentes, mais de même nature (dimensions, angle...).

cos()

Calcul le cosinus d'un angle.

exp()

Calcule l'exponentielle d'un nombre.

hypot()

Calcule la racine carrée d'une somme de carrés de nombres.

⚠

if()

Cette fonction permet de sélectionner une valeur parmi une liste proposée, chaque valeur étant associée à une condition.

log()

Calcule le logarithme d'un nombre.

max()