Générateur de pseudo-classes CSS ':nth-child()'

Sélection calculée selon les formules 'in+o'(1) des pseudo-classes générées :

  1.  
  2.  
  3.  
  4.  
  5.  
  6.  
  7.  
  8.  
  9.  
  10.  
  11.  
  12.  
  13.  
  14.  
  15.  
  16.  
  17.  
  18.  
  19.  
  20.  
  21.  
  22.  
  23.  
  24.  
  25.  
  26.  
  27.  
  28.  
  29.  
  30.  
  31.  
  32.  
  33.  
  34.  
  35.  
  36.  
  37.  
  38.  
  39.  
  40.  
  41.  
  42.  
  43.  
  44.  
  45.  
  46.  
  47.  
  48.  
  49.  
  50.  
  51.  
  52.  
  53.  
  54.  
  55.  
  56.  
  57.  
  58.  
  59.  
  60.  
  61.  
  62.  
  63.  
  64.  
  65.  
  66.  
  67.  
  68.  
  69.  
  70.  
  71.  
  72.  
  73.  
  74.  
  75.  
  76.  
  77.  
  78.  
  79.  
  80.  
  81.  
  82.  
  83.  
  84.  
  85.  
  86.  
  87.  
  88.  
  89.  
  90.  
  91.  
  92.  
  93.  
  94.  
  95.  
  96.  
  97.  
  98.  
  99.  
  100.  
  101.  
  102.  
  103.  
  104.  
  105.  
  106.  
  107.  
  108.  
  109.  
  110.  
  111.  
  112.  
  113.  
  114.  
  115.  
  116.  
  117.  
  118.  
  119.  
  120.  

"i", le facteur d'intervalle

Fixer le facteur de l'intervalle "i" entre les enfants, entre -24 et 24(2) :

"o", le numéro de rang à l'origine

Fixer le numéro de rang "o" de l'enfant à l'origine, entre -120 et 120(2)(3) :

li:nth-child(0)

"i" bis, intervalle optionnnel cadré par la sélection 1

Pour définir un rang de fin(4), voir "o" bis à la fin ;
sinon, fixer "i" bis comme intervalle d'une sélection interne à la première
(à partir du moment où celle-ci est déjà effective) :

"o" bis, rang optionnel cadré par la sélection 1

Fixer "o" bis comme rang d'une sélection interne à la première
- si celle-ci est déjà effective -
afin, en l'absence de "i" bis, de définir un rang de fin(4) :

li:nth-child(0)

Interfacteur au 26 mars 2014 ; déclinaisons ; version 0.1
À lire ailleurs : :nth-child(N) » Learn CSS3 ; Selectors Level 3 ; :nth-child(n) · css · WPD · WebPlatform.org ;
un testeur de formule sur css-tricks.com : :nth Tester

Note 1

CSS applique une fonction de type mathématique 'ax + b', ou 'in+o' dans notre cas, avec :
dans le rôle de la variable "x", l'argument "n" - que CSS paramètre automatiquement avec des entiers supérieurs ou égal à zéro ;
dans le rôle du coefficient directeur "a", le facteur d'intervalle "i" ;
dans le rôle de l'ordonnée à l'origine "b", le numéro ordinal de rang "o" de l'enfant à l'origine(3).
Le résultat est la suite ordinale composée des numéros de rang des enfants sélectionnés dans l'ensemble
- le premier enfant de l'ensemble ayant le rang ordinal 1 - vs 0 de l'index en programmation.

Note 2

-24, 24, -120, 120 :
ces valeurs sont ici choisies de façon à faciliter la manipulation du formulaire, mais ne représentent en elles-mêmes aucun sens dans le cadre de la spécification CSS.

Note 3

Avec un facteur d'intervalle "i" positif, l'enfant à l'origine est l'enfant le plus "à gauche" de la sélection (en 'dir="rtl"'), le plus proche du début de l'ensemble.
Cet enfant à l'origine est réel et visible avec un rang ordinal "o" positif qui ne dépasse pas l'ensemble des enfants.
Il est virtuel, sans existence dans le DOM, avec un rang "o" qui excède le nombre total des enfants ou qui est fixé par un nombre négatif.
'2n-5' par exemple, commence visiblement à 1 comme avec '2n+1', mais commence virtuellement à -5 : [-5,-3,-1,1,3,5,7,…]

Avec un facteur d'intervalle "i" négatif, l'enfant à l'origine est l'enfant le plus "à droite" de la sélection (en 'dir="rtl"'), le plus proche de la fin de l'ensemble.
Sa réalité ou sa virtualité dépend toujours des même critères.
'-2n+100' par exemple, commence visiblement avec l'enfant pair situé le plus à droite des enfants, mais virtuellement à 100 : [100,98,96,94,92,…]

Le décompte virtuel semble limité au milliard d'après tests Firefox et Chrome Mac :
:nth-child(-999999999n+1000000000) fonctionne - cela équivaut à nth-child(1) - mais
:nth-child(-9999999999n+10000000000) ne fonctionne pas.

Note 4

Pour limiter une sélection, par exemple aux quatre premiers multiples de 3 d'un ensemble quelconque :
:nth-child(-3n+12)
ou :
:nth-child(3n):nth-child(-n+12)

Il y a pour cela une autre pseudo-classe mais qui nécessite que l'on connaisse le total de l'ensemble, disons 20 éléments :
:nth-last-child(3n+9)
où 9 est à calculer en fonction du total de 20.