fonction nth-child

stephcache
Les bases HTML/CSS 
tyle type="text/css">
#section_adresse {border-radius: 15px; border: 2px solid #cc04c2; background-color: #000; color: #fff; text-align: center; padding: 5px; background: url("administration/toile.svg") no-repeat; background-size: 100% 100%;}
#section_adresse p {padding: 0; margin: 0;}
#section_adresse p:first-child, p:last-child {color: #fc1109}
#section_adresse p:nth-child{2} {color: #cc04c2;}
</style>
<div id="section_adresse">
<p>BLOODLINE</p>
<p>Tatouage et Piercing</p>
<p>5 Place de la république</p>
<p>58300 DECIZE</p>
<p>03 86 50 21 08</p>
</div>

Bonjour, la jonction nth-child ne passe pas le deuxième p en violet ?

4 réponses

stephcache
Auteur
Réponse acceptée 
#section_adresse {border-radius: 15px; border: 2px solid #cc04c2; background-color: #000; color: #fff; text-align: center; padding: 5px;}
#section_adresse p {padding: 0; margin: 0;}
#section_adresse p:first-child {color: #fc1109}
#section_adresse p:nth-child(n+2) {color: #cc04c2;}
#section_adresse p:last-child {color: #fc1109}

J'ai fait sa et sa marche comme je le voulais merci

stephcache
Auteur

Dsl du dérangement je viens de voir que c'est des parenthésée qu'il faut mettre pour la propriété de la fonction nth-child.

Par compte, me demande comment on peut faire pour mettre la balise <p> qui est en 3,4,5 éme position uniquement en violet ?

Stevens

Le violet c'est bien le #cc04c2?

Si oui alors au lieu de mettre :

p:last-child {color: #fc1109}
#section_adresse p:nth-child(2) {color: #cc04c2;}

Met plutot : 

#section_adresse p:nth-child(n+2) {color: #cc04c2;}
p:last-child {color: #fc1109}
maoubi

Par compte, me demande comment on peut faire pour mettre la balise <p> qui est en 3,4,5 éme position uniquement en violet ?
comme ceci. (chaque ligne a partir de la 3e ligne): 

#section_adresse p:nth-child(n+3) {color: #cc04c2;}

si c'est rouge puis ensuite tout violet, la solution de Stevens est la meilleure.