Découvre comment sélectionner des elements en fonction de leurs position au sein de leurs parents grace aux pseudo-class child !

Pseudo-class enfant

Les pseudo-class que j'appelle "enfant", sont des pseudo-class permettant de sélectionner un ou plusieurs éléments en fonction de leur position au sein d'un autre élément.

On découvrira dans cet article 5 pseudo-class enfants qui vous permettront de sélectionner des éléments selon leurs position. Ils pourront être très utile, on le verra, lorsqu'on se retrouve face à une liste d'élément afin de donner du style sans avoir à sélectionner les éléments un par un.

nth-child

La pseudo-class :nth-child() pourrait se traduire par énième-enfant.

Il nous permet de sélectionner un élément en fonction de sa position au sein d'un élément.

Commençons par découvrir la syntaxe de base :

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

ul > li:nth-child(3){
  border: 2px solid blue;
}

ul > li:nth-child(n + 4){
  background-color: red;
}

On voit donc que l'on peut sélectionner un élément en fonction de sa position avec nth-child(x) avec x étant la position de notre élément.

On peut aussi sélectionner tous les éléments dont la position est supérieur ou égal à la valeur définis avec nth-child(n + x). Pour bien comprendre il faut traduire nth-child(n + 3)par : tous les éléments (n), dont la position est supérieur à 3.

n

n représente tous les chiffres de 0 à l'infini. Quand on dit n + 3, on obtient donc :

0+3 = 3, 1+ 3 = 4, 2+ 3 = 5, 3+ 3 = 6 ...

On sélectionnera donc les éléments ayant comme position : 3, 4, 5, 6...

-n

On a vu comment utiliser le navec des additions, passons maintenant au -n.

On a dit que n représente tous les chiffres de 0 à l'infini. Alors –n représente tous les chiffres négatifs de 0 à moins l'infini : 0, -1, -2, -3, -4...

En reprenant le même exemple d'HTML que tout à l'heure, on peut donc dire :

ul > li:nth-child(-n + 3){
  background-color: blue;
}

On voit donc que les 3 premiers éléments sont sélectionnés.

Donc quand on dit -n + 3on obtient:

0+ 3 = 3, -1+ 3 = 2, -2+ 3 = 1, -3+ 3 = 0, -4+ 3 = -1 ...

On sélectionne donc les éléments ayant la position égale à un de ces résultat ; ici, les 3 premiers éléments.

xn

Pour multiplier un n on n'utilisera pas la syntaxe : n * x.

On fera simplement : xn

Reprenons l'exemple d'HTML du début :

ul > li:nth-child(3n){
  background-color: red;
}

On voit donc que l'on sélectionne un élément tous les 3 éléments.

3nreviens donc à faire :

0* 3 = 0, 1* 3 = 3, 2* 3 = 6 ...

On sélectionne donc les éléments dont la position correspond à 3, 6, 9, 12...

On peut aussi associer les multiplications, et les additions :

ul > li:nth-child(2n + 1){
    background-color: red;
}

Ce qui reviens donc à faire :

0 * 2 + 1 = 1, 1 * 2 + 1 = 3, 2 * 2 + 1 = 5 ...

On voit aussi qu'on sélectionne tous les nombres impairs, et qu'on pourrait sélectionner tous les nombres pairs avec : 2n.

Mais, on va le voir, il y a une façon plus simple de faire ça.

even

CSS nous offre un argument très pratique que l'on peut appliquer à nth-child.

En effet, on peut donner even comme argument, qui sélectionnera tous les éléments dont la position est un chiffre pair.

ul > li:nth-child(even){
    background-color: red;
}

On peut donc voir qu'un élément sur deux est sélectionné, en commençant par le deuxième.

odd

On a donc vu qu'on peut sélectionner les éléments qui ont une position paire. Voyons maintenant comment sélectionner les éléments dont la position est impaire, grâce à l'argument odd:

ul > li:nth-child(odd){
    background-color: red;
}

On a donc sélectionné tous les éléments dont la position est un nombre impair.

nth-child(x of selector)

Pour finir avec nth-child, une dernière syntaxe s'offre à nous, et nous allons le voir, elle nous offre une toute nouvelle dimension.

Avec la pseudo-class nth-child, on peut écrire :

:nth-child(n+4 of .foo){
    /* ... */
}

Avant de voir le résultat, on va essayer de comprendre ce que ça veut dire ;

Notre sélecteur pourrait se traduire par :

"parmi les éléments ayant la class "foo", sélectionne ceux dont la position est supérieure ou égale à 4"

Alors, on peut être amené à se demander quelle différence il y a entre ces deux sélecteurs :

.foo:nth-child(n+4){
    border: solid red 3px;
}

:nth-child(n+4 of .foo){
    background-color: blue;
}

Il y a bien une différence, et nous allons le voir en appliquant ce CSS à l'HTML suivant :

<ul>
  <li>1</li>
  <li class="foo">2</li>
  <li>3</li>
  <li class="foo">4</li>
  <li>5</li>
  <li class="foo">6</li>
  <li class="foo">7</li>
  <li>8</li>
  <li class="foo">9</li>
</ul>

On voit ici que les éléments 4, 6, 7 et 9 ont un border rouge. Ils correspondent donc au sélecteur.foo:nth-child(n+4), car leur position est supérieure ou égale à 4 et ils ont la class .foo.

Cependant, seul les éléments 7 et 9 ont une background color bleu, car le sélecteur :nth-child(n+4 of .foo) ne prend en compte que les éléments ayant la class foo pour calculer leurs positions. Avec ce sélecteur, le premier élément ayant la class foo aura la position 1, le deuxième élément a la class foo aura la position 2 etc.

Alors qu'avec un sélecteur nth-child "normal" dans cet exemple, le premier élément avec une class foo a la position 2 le deuxième a la position 4 etc.

On voit donc que ce n'est pas juste une syntaxe différente, mais une façon complètement différente de sélectionner des éléments.

nth-last-child

La pseudo-class :nth-last-child fonctionne exactement comme :nth-child, sauf qu'ici on part de la fin.

Reprenons l'HTML du début :

ul > li:nth-last-child(n+4){
    background-color: blue;
}

On voit donc que seul les 3 derniers éléments ne sont pas sélectionnés. On comprend donc que l'ordre des positions est inversé, le dernier élément a la position 1, l'avant dernier la position 2 etc.

On peut donc appliquer toutes les règles et syntaxes qu'on a vu avec nth-child, elles agiront de la même façon, mais tout sera inversé.

Je ne reviendrais donc pas dans cette partie sur toutes ces règles, referez-vous à la partie sure :nth-child et transposer à nth-last-child.

first-child

La pseudo-class :first-child permet de cibler un élément étant le premier élément de son parent.

Prenons cet HTML :

<div>
    <h1>Hey guys !</h1>
    <p>This is CSSami</p>
</div>
<div>
    <p>I'm in an other div</p>
    <h1>LayoutCSS</h1>
</div>
<div>
    <p>And i'm in an other div too</p>
    <h2>Pure CSS</h2>
</div>

div :first-child{
    color: red;
}

On voit donc que tous les premiers éléments sont sélectionnés.

p:first-child{
    color: red;
}

On voit ici que tous les éléments p étant en première position de leurs parents sont sélectionné.

On ne sélectionne donc pas les premiers p mais les p étant en première position !

last-child

La pseudo-class :last-child, vous l'aurez compris, est le contraire de last-child. On sélectionne donc les derniers éléments enfants.

div :last-child{
    color: red;
}

only-child

La pseudo-class :only-child, sélectionne les éléments qui sont les uniques enfants de leurs parents :

<div>
    <p>Hey guys !</p>
</div>
<div>
    <p>I have a brother</p>
    <h1>I'm his brother</h1>
</div>

:only-child{
    color: red;
}

On voit que seul le premier élémentp est sélectionné, car il est un enfant unique de son parent.