Bonjour,

Alors voilà, j'ai des icônes en span et ces icônes sont dans une DIV:

<div class="a">
<span class="icons1"></span>
<span class="icons2"></span>
<span class="icons3"></span>
</div>

Alors, j'ai déjà fait des actions avec toutes les icônes grâce à:

.a span {
color: red;
font-size: 150%;
}

Mais voilà, j'aimerais sélectionner la seconde span et donc j'entre:

.a span {
color: red;
font-size: 150%;
}

.a span:nth-child(2) {
color: blue;
font-size: 200%;
}

Mais voilà, la seconde span n'agit pas, rien.

-
Edité par Lenny Obez 20 février 2015 à 11:39:02

Salut, 

attention à ne pas confondre nth-child et nth-of-type 

Je pense que tu cherches à faire plutôt

.a span:nth-of-type(2){
    color:blue; /* .... */
}

-
Edité par Sebastien XD 19 février 2015 à 23:45:04

Dès que je mets un :nth-child(2) ou :nth-of-type(2), rien ne fonctionne !

Dans le cas présent, ça revient au même. Par contre, le fait que tu aies oublié le = devant le nom de ta classe, ça ne doit pas aider.

-
Edité par EmmanuelBeziat 20 février 2015 à 1:28:50

G3notYp3 tu nous fera 100 lignes :

"Quand ça marche pas je relis mon code dix fois"

J'ai oublié de le mettre dans l'exemple, il y a un "=" dans mon vrai code.

Le problème c'est que sans :NTH-CHILD() ou :NTH-OF-TYPE(), ma balise réagit pour tous (logique) et dès que je mets un :NTH-CHILD(2) { ... } rien ne réagit.

-
Edité par Lenny Obez 20 février 2015 à 11:38:53

Ben je sais pas comment tu fais, parce que : http://codepen.io/lamecarlate/pen/XJEowY

Tu dois avoir du css autre part qui surcharge. On peut avoir plus de code, ou mieux, une page en ligne ?

Salut,

Petite question... Si tu attribues une classe à chaque balise "span", je ne comprends pas l'utilité d'un nth-child ?

.a .icons2 suffit, non ?

-
Edité par Bartudis 20 février 2015 à 12:13:37

Bartudis a écrit:

Salut,

Petite question... Si tu attribues une classe à chaque balise "span", je ne comprends pas l'utilité d'un nth-child ?

.a .icons2 suffit, non ?

-
Edité par Bartudis il y a 28 minutes

Pas con

De rien

A+

Merci J'y avais un peu pensé mais comme je découvrais le NTH-CHILD/NTH-OF-TYPE, je voulais impérativement l'utiliser

-
Edité par Lenny Obez 20 février 2015 à 13:57:29

Ben ceci dit, nth-child est tout à fait censé fonctionner, avec le code que tu as fourni ici.

Oui effectivement Lamecarlate, c'est une solution alternative que je propose, malgré tout elle n'explique pas la raison du problème du nth-child.

Pour moi il y a un problème dans ton code css à endroit différent de celui que tu nous as fourni.

Lorsque je marque par exemple

.a span { color: black }

Dans les outils de développement de Chrome, il trouve le code mais lorsque je marque:

.a span:nth-child(2) { color: black }

ou

.a span:nth-of-type(2) { color: black }

Il n'en est rien, les outils de développement ne trouve pas le code, comme si il n'était pas là alors que j'ai bien sauvegardé et rafraîchit la page, je pense à une erreur avec Chrome ou Wamp. Car je rajoute juste un :nth-child(2) ou :nth-of-type(2) et mon code n'existe plus.

Peut être que ton code est dans un CSS externe qui n'est pas rechargé ? fais bien Ctrl + Shift + R pour recharger le cache

De plus si ton code est celui que tu donnes dans ton dernier exemple, il ne va rien se passer (color black partout).

En effet, dans ton cas nth-child et nth-of-type donnera la même chose, mais la subtilité entre les deux est à connaitre

Ce sont des codes d'exemple mais laissez tomber, il y a bien une erreur, je me suis amusé à mettre presque partout dans mon code css :nth-child(2) pour tester mais rien, c'est comme si mon code n'était pas lu, je sais pas, ça doit bugger !

Donne-nous ton code complet, ou bien une page en ligne (mieux encore, plus facile pour nous de détecter s'il y a une surcharge quelque part).

Je sais que ce message est asse ancien. je suis tombé dessus car j'avais le même p^roblème et j'ai pu identifier une cause de bug pour la fonction nth-child : elle ne fonctionne pas si vous avez des hr dans le DIV, entre les éléments. Les HR bloquent le css.

@AlexDelavaquerie : ce n'est pas un "bug" et hr ne bloque pas le CSS. C'est même parfaitement logique : nth-child() cible un élément enfant de son parent.

<div class="parent">
    <div></div>
    <span></span>
    <hr>
    <blockquote></blockquote>
</div>

<div> est le premier enfant, <span> est le second, <hr> le troisième, <blockquote> le quatrième. Donc évidemment, si on essaie de cibler blockquote avec nth-child(3), ça ne marche pas, puisque ça tombe sur le <hr>.