CSS: sintaxis para seleccionar una clase dentro de un id.

¿Cuál es la sintaxis del selector para seleccionar una etiqueta dentro de un id con el nombre de clase? Por ejemplo, ¿qué debo seleccionar a continuación para que el "li" interior se vuelva rojo?CSS: sintaxis para seleccionar una clase dentro de 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>

Fuente

2009-07-16 Jeremy

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

Fuente

2009-07-16 22:25:12

tiene selectores innecesarios! – Galen

me refiero a innecesario! – Galen

Solo si el ejemplo que se muestra es todo el marcado. Por lo que sabemos, el marcado necesario es más complicado. Basé mi respuesta en la información proporcionada. –

.navigationLevel2 li { color: #aa0000 }

Fuente

2009-07-16 22:24:39 Galen

si esto hace el truco sin aplicarla a li no deseado: s, entonces este es el camino a seguir, ya que tiene un menor número de selectores y por lo tanto es más rápido. Al menos de acuerdo con el consejo de rendimiento de la página de Google. – PatrikAkerstrand

Aquí hay dos opciones. Yo prefiero la opción navigationAlt ya que implica menos trabajo en el final:

<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>

Fuente

2009-07-16 22:30:43 Jason

Esto también va a funcionar y que no necesita la clase extra:

#navigation li li {}

Si tener un tercer nivel de LI, puede que tenga que reiniciar/anular algunos de los estilos que heredarán del selector anterior. Puede orientar el tercer nivel de esta manera:

#navigation li li li {}

Fuente

2009-07-16 22:39:50

CSS: sintaxis para seleccionar una clase dentro de un id.

Respuesta

Cuestiones relacionadas