[SOLUCIONADO] Color de un div según su contenido solo con css

[fegm_4]

Quisiera saber si es posible cambiar el color de un div según su contenido usando solamente usando CSS.

Coloco un ejemplo:
Tengo el siguiente menu:

• Home
• Productos
  • Hogar
  • Niños
  • Mascotas
• Galeria
  • Clientes
  • Proveedores
• Contacto

Donde el color de la fuente de las palabras Home, Productos, Galeria y Contacto seria Azul, Rojo, Verde y Naranja respectivamente. Luego cada submenú hereda el color del padre.

Si podrían ayudarme se los agradecería

[pzin]

Puedes ponerle clases o identificadores a cada elemento:

Código HTML:

<li class="productos">
  Productos
  <ul>
  </ul>
</li>
<li class="galeria">
  Galería
  <ul>
  </ul>
</li>
 

Código CSS:

.productos {
  color: blue;
}
 
.galeria {
  color: red;
}
 

O usar nth-child() en el selector:

Código CSS:

ul > li:nth-child(1) {
  color: blue;
}
 
ul > li:nth-child(2) {
  color: red;
}
 

[fegm_4]

Saludos pzin! Gracias por tu respuesta!. La segunda opción usando la pseudo clase nth-child me parece la mas conveniente debido a que el contenido de mi menu es dinamico (depende de las opciones que tenga el usuario habilitada).

Sin embargo al probarla coloco lo siguiente:

Código CSS:

#menu > ul > li > a > span:nth-child(1){
    color: #fcaf3e;
}
 

y todos los elementos me cambian a ese color y no solo el que quiero. ¿Tienes alguna idea de como podría resolverlo? De nuevo gracias por tu ayuda

[pzin]

Claro, porque todos los span seguramente sean los primeros hijos de cada enlace.

Ponlo como te dije, y debería de funcionar:

Código CSS:

ul > li:nth-child(1) a span {
  color: red;
}
 
ul > li:nth-child(2) a span {
  color: blue;
}
 

[fegm_4]

Funcionó! Disculpa lo torpe, es que soy nuevo en esto ja ja aj. Muchas gracias!