28173 sujets

CSS et mise en forme, CSS3

Utiliser :nth-child seulement sur les éléments ayant une classe

Bonjour,

Voici un code d'exemple :


<ul>
<li>texte</li>
<li class="une_classe">texte</li>
<li class="une_classe">texte</li>
<li class="une_classe">texte</li>
<li>texte</li>
<li>texte</li>
<li>texte</li>
<li class="une_classe">texte</li>
<li class="une_classe">texte</li>
<li class="une_classe">texte</li>
</ul>




li.une_classe:nth-child(2n+2)
{
color: red;
}


En voyant ce code, je m'attends à ce que :nth-child agisse uniquement sur les <li> ayant la classe "une_classe" or ce n'est pas le cas. Le sélecteur ignore la classe et se base sur toutes les <li> de la liste. Après d'âpres recherches sur la toile avec mon meilleur ami, j'ai pu voir que certains proposaient l'utilisation de :nth-of-type mais ça ne marche pas mieux.

Merci d'avance.
Ça le fait partout. Pour prendre un exemple ultra simple :


<ul>
<li>texte 1</li>
<li class="une_classe">texte 2</li>
<li class="une_classe">texte 3</li>
<li class="une_classe">texte 4</li>
<li>texte</li>
<li>texte</li>
<li>texte</li>
<li class="une_classe">texte</li>
<li class="une_classe">texte</li>
<li class="une_classe">texte</li>
</ul>




li.une_classe:nth-child(2)
{
color: red;
}


Avec ce code, je m'attends à ce que la <li> contenant "texte 3" soit en rouge or ce n'est pas le cas, c'est "texte 2" qui est en rouge. Cela prouve bien que nth-child ne prend pas en compte la classe mais bien l'élément <li> uniquement, sans prendre en compte la classe. Si c'est le cas et qu'il n'y a pas de solution, c'est bien dommage...

Merci
bon j'ai repris l'exemple que j'avais écrasé avec une autre CSS :

http://codepen.io/anon/pen/kJxtd

Pour ce que tu essai de filtrer, le filtre fonctionne comme ceci :

couleur rouge si
nth-child(2) (on rgarde si il y a un 2eme element )
si oui
on verifie class= .une_class
enfin , si li alors okay texte rouge !

Les selecteur ne s'imbriquent pas , ils se complètent.
si tu as une idée ou peut se trouver ton deuxieme li ....
Donc si je te comprend, le navigateur va sélectionner le 2e élément puis appliquer le style uniquement s'il y a la classe. Vraiment dommage que cela fonctionne ainsi ! Je vais encore faire des tests pour vérifier ça, merci beaucoup pour la réponse !
Modifié par deejay-bee (25 Jun 2013 - 15:01)
Sujet clos
Aller à