CSS - Syntaxe pour sélectionner une classe dans un ID

Quelle est la syntaxe de sélection pour sélectionner une étiquette dans un ID via le nom de la classe? Par exemple, que dois-je sélectionner ci-dessous pour que le "li" devienne rouge?CSS - Syntaxe pour sélectionner une classe dans un ID

<html> 
<head> 
    <style type="text/css"> 
     #navigation li 
     { 
      color: green; 
     } 

     #navigation li .navigationLevel2 
     { 
      color: red; 
     } 
    </style> 
</head> 
<body> 
    <ul id="navigation"> 
     <li>Level 1 item 
      <ul class="navigationLevel2"> 
       <li>Level 2 item</li> 
      </ul> 
     </li> 
    </ul> 
</body> 
</html>

Source

2009-07-16 Jeremy

#navigation .navigationLevel2 li 
{ 
    color: #f00; 
}

Source

2009-07-16 22:25:12

a sélecteurs inutiles! – Galen

je voulais dire inutiles! – Galen

Seulement si l'exemple montré est tout le balisage. Pour tout ce que vous savez, le balisage nécessaire est plus compliqué. J'ai basé ma réponse sur l'information donnée. –

.navigationLevel2 li { color: #aa0000 }

Source

2009-07-16 22:24:39 Galen

Si cela ne l'affaire sans l'appliquer à li indésirable: s, alors c'est le chemin à parcourir, car il a moins de sélecteurs et est donc plus rapide. Au moins selon les conseils de performance de Google. – PatrikAkerstrand

est ici deux options. Je préfère l'option navigationAlt car elle implique moins de travail à la fin:

<html> 
 

 
<head> 
 
    <style type="text/css"> 
 
    #navigation li { 
 
     color: green; 
 
    } 
 
    #navigation li .navigationLevel2 { 
 
     color: red; 
 
    } 
 
    #navigationAlt { 
 
     color: green; 
 
    } 
 
    #navigationAlt ul { 
 
     color: red; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <ul id="navigation"> 
 
    <li>Level 1 item 
 
     <ul> 
 
     <li class="navigationLevel2">Level 2 item</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
    <ul id="navigationAlt"> 
 
    <li>Level 1 item 
 
     <ul> 
 
     <li>Level 2 item</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</body> 
 

 
</html>

Source

2009-07-16 22:30:43 Jason

Cela permettra également de travailler et vous n'avez pas besoin de la classe supplémentaire:

#navigation li li {}

Si vous avoir un troisième niveau de LI vous devrez peut-être réinitialiser/redéfinir certains des styles qu'ils hériteront du sélecteur ci-dessus. Vous pouvez cibler le troisième niveau comme ceci:

#navigation li li li {}

Source

2009-07-16 22:39:50

CSS - Syntaxe pour sélectionner une classe dans un ID

Répondre

Questions connexes