Objectifs

• Connaitre le sélecteur :nth-child
• Etre capable d’utiliser le sélecteur :nth-child

Définitions

• Le sélecteur :nth-child ("n-ième enfant") vous permet de sélectionner un ou plusieurs éléments en fonction de leur ordre dans la source et selon des critères que vous déterminez.

Utilisation

• Le sélecteur correspond à chaque élément qui est le n ème enfant, quel que soit son type, de son parent.:nth-child(n)
• n peut être un nombre, un mot clé ou une formule.
• Supposons que nous ayons une table et que nous voulions colorer les cellules selon certaines critères


<table border="1" cellpadding="20%" cellspacing="4" style="width:150px;font-weight:bold;font-size:18px;text-align:center;">
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
<tr><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>
<tr><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td></tr>
<tr><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td></tr>
<tr><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td><td>36</td></tr>
<tr><td>37</td><td>38</td><td>39</td><td>40</td><td>41</td><td>42</td></tr>
</table>


n est un simple chiffre

• Si un chiffre est spécifié, seul un élément sera sélectionné
• Exemples:
• tr:nth-child(2) sélectionnerait le deuxième ligne dans notre tableau.
  tr:nth-child(2) {background: blue;}



• td:nth-child(2) sélectionnerait le deuxième colonne dans notre tableau ou plus précisément la deuxième cellule de chaque ligne.
  td:nth-child(2) {background: blue;}

n est un mots-clés even (pair) ou odd (impair)

• Si c’est un mot-clé, une itération permettra de sélectionner le ou les éléments correspondants.
• td:nth-child(even) sélectionnerait touts les cellules pairs dans notre tableau.
  td:nth-child(even) {background: blue;}



• td:nth-child(odd) sélectionnerait touts les cellules impairs dans notre tableau.
  td:nth-child(odd) {background: blue;}

n est une formule

• Utiliser une formule ( an + b ). où: a représente une taille de cycle, n est un compteur (commence à 0) et b est une valeur de décalage.
• Si n est une formule, une itération permettra de sélectionner le ou les éléments correspondants.
• td:nth-child(3n+0) sélectionnerait toutes les cellules dont l’index est un multiple de 3.
  td:nth-child(3n+0) {background: blue;}



• td:nth-child(5n+3).
  td:nth-child(5n+3) {background: blue;}
• Cela stipule que tous les 5ème cellules du tableau à partir de la 3ème inclus seront colorées, c’est à dire les cellules numérotés 3, 9, 15, 21, 27, etc.