Couleurs des liens de premier niveau

Bonjour,

Dans le code suivant j'aimerai appliquer une couleur au lien de premier niveau (1ER NIVEAU 1, 1ER NIVEAU2, 1 NIVEAU 3 etc.) et uniquement de premier niveau mais je n'y arrive pas, a chaque fois ceux des autres niveaux sont impactés. Merci pour votre aide

<ul class="menu sf-menu sf-horizontal">
      <li class="first-child item11"><a href="#"><span>1ER NIVEAU 1</span></a></li>
      <li class="parent item92"><a href="#"><span>1ER NIVEAU 2</span></a>
            <ul>
               
               <li class="parent item184"><span class="separator"><span>2ème niveau 1</span></span>
                  <ul>
                     <li class="first-child item85"><a href="#"><span>3ème niveau 1</span></a></li>
                     <li class="item86"><a href="#"><span>3ème niveau 2</span></a></li>
                     <li class="last-child item181"><a href="#"><span>3ème niveau 3</span></a></li>
                  </ul>
               </li>

               <li class="item183"><a href="/espace-membres/photos"><span>2ème niveau 2</span></a></li>
               <li class="parent item185"><span class="separator"><span>2ème niveau 3</span></span>
                   <ul>
                       <li class="first-child item50"><a href="#"><span>3ème niveau 4</span></a></li>
                       <li class="item51"><a href="#"><span>3ème niveau 5</span></a></li>
                       <li class="last-child item180"><a href="#"><span>3ème niveau 6</span></a></li>
                 </ul>
               </li>
               
               <li class="parent item186"><span class="separator"><span>2ème niveau 4</span></span>
                   <ul>
                                 <li class="first-child item187"><a href="#"><span>3ème niveau 7</span></a></li>
                                 <li class="item188"><a href="#"><span>3ème niveau 8</span></a></li>
                                 <li class="last-child item189"><a href="#"><span>3ème niveau 9</span></a></li>
                  </ul>
               </li>
               </ul>
               </li>
               
              <li class="item13"><a href="#"><span>1ER NIVEAU 3</span></a></li>
              <li class="item93"><a href="#"><span>1ER NIVEAU 4</span></a></li>
              <li class="item104"><a href="#"><span>1ER NIVEAU 5</span></a></li>
              <li class="item177"><a href="#" target="_blank"><span>1ER NIVEAU 6</span></a></li>
              <li class="last-child item94"><a href="#"><span>1ER NIVEAU 7</span></a></li></ul>

Modifié par vespa (02 Nov 2009 - 17:23)

Salut,

Il faut que tu gère cela avec les "class" qui sont affectée à tes <li>.
avec dans ton CSS un truc du genre:

.[nom de class] a {
    color: 378776;
}

Le souci c'est que ton script (wordpress?) mélange un peu les class et on retrouve les mêmes un peu partout.
Essaie de voir avec ton script s'il n'est pas possible qu'il gère des class perso comme: niveau1, niveau2, niveau3, etc.
Modifié par mamax (02 Nov 2009 - 17:56)

Bonjour,

Il s'agit là d'un comportement normal, la propriété couleur étant héritée.
Pour résoudre ce problème, il suffit de surcharger les niveaux suivants comme par exemple :

li a { color : red; }
li li a {color : green;}

Les liens contenus dans un seul élément de liste seront rouges tandis que ceux qui seront contenus dans une liste à imbriquée (li li) seront verts.

Pour de plus amples informations sur l'héritage des propriétés, je conseille la lecture de quelques articles de la section apprendre.

maxmax a écrit :
Il faut que tu gère cela avec les "class" qui sont affectée à tes <li>.

L'emploi de class n'est pas nécessaire.
Modifié par Corinne S. (02 Nov 2009 - 18:13)