Comment fonctionne nth-child

J'utilise assez souvent nth-child et vis à vis des listes ou des élements identiques qui se suivent, ça marche bien et de façon logique.
Hors, je viens de faire un site dans le quel j'ai utilisé aussi nth-child mais avec des éléments identiques non suivi, ex :

<div>
<a></a>
<br/><br/>
<a></a>
<a></a>
</div>

Si je fais div a:nth-child(2) ça ne marchera pas,
si je veux le second <a> je dois faire a:nth-child(4)
les <br/> étants pris en compte ce qui revient à cela :
div *:nth-child(2).
Question : pourquoi alors préciser le a ?? puisque tous les éléments sont pris en compte ?
Merci pour vos retours =)

Bonjour Quice,

Effectivement c'est étrange !

Sans pouvoir dire le pourquoi du comment de ce comportement, dans ce cas, il reste plus approprié d'utiliser le sélecteur :nth-of-type(). Avec celui-ci tu es sûr que les break-row ne sont pas pris en compte.

Bonne journée !
Modifié par Greg_Lumiere (07 Jul 2016 - 10:11)

Bonjour !

quice a écrit :

Question : pourquoi alors préciser le a ?? puisque tous les éléments sont pris en compte ?

Un élément qui serait à la fois le énième enfant de son parent et un lien ?

Quoi qu'il en soit, ça ressemble plus à une propriété sortie du cerveau d'un programmeur qu'à un outil répondant à des questions pratiques...



Edit : nth-child() et nth-of-type() sortent tous les deux de la tête d'un programmeur (ce n'était pas sympa de ma part). Cependant, je suis prête à parier que nth-child() a été inventé avant nth-of-type()...
Modifié par Zelena (07 Jul 2016 - 10:17)

Bonjour,

quice a écrit :
si je veux le second <a> je dois faire a:nth-child(4)
les <br/> étants pris en compte ce qui revient à cela :
div *:nth-child(2).

Nop, "div *:nth-child(2)" ne fonctionne pas différemment.

Et le comportement est le même avec un <p> à la place des <br/>. A savoir un a:nth-child(2) ne fait rien si on a un enchaînement <a><p><a><a>

Le "a" dans "a:nth-child(2)" viens juste préciser qu'il faut que ce soit un <a> pour appliquer le style. Le sélecteur principal reste le ":nth-child(2)". Il va donc sélectionné le second fils et, si c'est un <a>, appliquer le style. Si tu veux prendre le second <a> fils d'un <div> il faut effectivement utiliser ":nth-of-type()".

Bonne journée

<br/> était un exemple, le problème reste identique quelque soit la balise...

-> "si c'est un <a>, appliquer le style"
Le fait de préciser le a ou pas, le navigateur s'en fiche, pour lui, ce n'est pas la bonne
balise.
En fait, il doit numéroter les balises les unes à la suite des autres, et sélectionner celle
qui est précisée dans nth-child.

Je l'ai testé en "live"
et effectivement le nth-of-type est plus approprié

Zelena a écrit :

nth-child() et nth-of-type() sortent tous les deux de la tête d'un programmeur

Je suis développeur à la base, et en tant que développeur, je n'aurais jamais sorti un nth-child sur une balise définie avec un tel comportement.
J'ai l'impression que le développeur l'à sorti sans faire de tests sérieux.
Car dans ce cas, préciser la balise se sert strictement à rien

Zelena a écrit :

Cependant, je suis prête à parier que nth-child() a été inventé avant nth-of-type()...

Je ne pense pas, quoique...
Mais si on s'était aperçu du "bug", je pense qu'ils auraient corrigé nth-child.
Perso je pense qu'à la base, le nth-child à été fait pour sélectionner la n-ième balise du parent
quelque soit son nom, le nth-of-type pour sélectionner le n-ième type.

merci pour vos messages =)
Modifié par quice (07 Jul 2016 - 14:44)

quice a écrit :
Car dans ce cas, préciser la balise se sert strictement à rien

Bah si, ça sert à appliquer un style sur le second fils mais que si c'est un <a> (différent d’appliquer un style sur le second <a> quelque soit sa position générale et c'est aussi différent d'appliquer un style sur le second fils peut importe la balise)

Préciser la balise est effectivement inutile dans ce pas précis.

:nth-child(2n) {
  color: red;
}
// n'est pas équivalent (mais peut dans certains cas) à :
a:nth-child(2n) {
  color: 
}

donner la balise crée juste de la spécificité en plus.

c'est comme pour les classes:

.big {
  font-size: 2em;
}
h1.big {
  font-size: 4em;
}

Ce comportement est tout à fait normal, et n'est pas la cause d'un dev qui voulait rentrer chez lui, mais de centaines de dev qui ont travaillé sur ces normes pendant des années.
Modifié par kustolovic (07 Jul 2016 - 14:48)

_laurent a écrit :

Bah si, ça sert à appliquer un style sur le second fils mais que si c'est un &lt;a&gt; (différent d’appliquer un style sur le second &lt;a&gt; quelque soit sa position générale et c'est aussi différent d'appliquer un style sur le second fils peut importe la balise)

niet, si je met div a:nth-child(2){ display: none}
Ca ne marchera pas, je devrai faire a:nth-child(4){ display: none}

quice a écrit :
niet, si je met div a:nth-child(2){ display: none}
Ca ne marchera pas, je devrai faire a:nth-child(4){ display: none}

Hahaha oui, que ca ne corresponde pas à ton besoin c'est clair je réagissais, comme kustolovic, au fait que tu n'y trouve pas d'utilité générale
Modifié par _laurent (07 Jul 2016 - 14:52)