CAMBIO DE COLOR DE TEXTO TEMA ELLA VERSION 6.5.2

[AndresArrieta]

Buenos dias,

estoy tratando de cambiar el color de un texto de mi menu  pero ala hora de realizar el cambio no se como hacerlo 

necesito cambiar el color a rojo de OUTLET VIRTUAL

En las configuraciones del tema me dice que puedo usar CSS perzonalizado 

lo utilizo y si funciona pero me funciona para cambiar todo el color de el menu 

el codigo que estoy utilizando es el siguiente sera que me pueden ayudar a modificarlo para que solo me cambie el del outlet virtual 

.header__menu-item {
color: red;
}

muchas gracias

[AlfredoMendoza · Accepted solution]

Hola @AndresArrieta espero te encuentres bien.

Lo que quieres hacer puedes conseguirlo usando la pseudo clase last-child de CSS, pero quizá tengas que modificar un poco tu regla CSS para aplicar le estilo.

Te dejo el código aquí

ul.list-menu li:last-child a{
  color: red;
}

/*
ul -> es el contenedor padre de la lista de elementos del menú y para darle más peso a la regla usé la clase que tiene asignada "list-menu"

li -> son los hijos del elemento ul y solo quieres que el estilo se aplique al último elemento por ello se usa ahí la pseudo clase "last-child"

a -> terminas de asignar la regla al elemento sobre escribiendo el color que ya puede venir de otra regla CSS
*/

Nota: Es importante que el elemento al que quieres aplicar este estilo siempre sea el último dentro de la lista, de otra forma si agregas algo después de OUTLET VIRTUAL a ese último elemento se aplicará el estilo y OUTLET VIRTUAL se verá de nuevo en negro.

Espero te sea de ayuda.

[AndresArrieta]

muchas gracias funciono perfecto 

saludos

[AlfredoMendoza]

Me alegra saberlo.

¿Podrías ayudarme a marcar la respuesta como Solución y regalarme un like?
Será útil para otras personas y les servirá de guía.

Saludos.

[AndresArrieta]

Hola buenos dias, 

la solucion me funciono perfecto pero me acabo de dar cuenta que tambien si tengo listas despegables me pone el color de el ultimo item en rojo

se podra modificar el codigo para que no realice esto 

[AlfredoMendoza]

Hola @AndresArrieta espero te encuentres bien.

Tienes razón, lo que podrías hacer es cambiar un poco la regla CSS

ul.list-menu--inline > li:last-child a{
  color: red;
}

/*
en este código cambié el selector ul.list-menu por ul.list-menu--inline
y después de ello agregué el simbolo >.

Eso le dice a CSS que solo aplique la regla a los elementos que sean hijos directos del selector ul.list-menu--inline y los que fueras nietos o lo que siga ya no los  tomaría en cuenta para aplicar la regla.

Nota: Yo use el selector ul.list-menu--inline porque mi tema dawn incluye esa clase en el encabezado principal. Si tu tema no tiene esa clase podrías usar un identificador como el id de la sección o una clase que solo aplique al primer nivel de las opciones del menu. Te recomiendo tomar tu tiempo para encontrar el selector correcto
*/

Espero te funcione saludos.

[AndresArrieta]

hola muchas gracias funciono perfecto