[SOLUCIONADO] Dar estilo css al padre

[moriorGames]

Hola, buenos días a todos los foreros y foreras.

Estoy dando estilos css a un menú y me gustaría saber si existe la posibilidad en CSS de dar un estilo diferente al padre de una clase. Pongo algo de código.

Código PHP:

  <div class="menu"> 
    <ul> 
        <li> 
            <a href="#">enlace</a> 
        </li> 
        <li> 
        <a href="#">enlace</a> 
        <div class="drop"> 
            <ul> 
                <li> 
                    <a href="#">enlace</a> 
                </li> 
            </ul> 
        </div> 
        </li> 
        <li> 
            <a href="#">enlace</a> 
        </li> 
    </ul> 
</div>  
   

El caso es que el segundo elemento del menú, contiene un div con clase drop que está escondido y que cuando se hace hover sobre el menú se muestra haciéndose un menú desplegable.

Lo que quiero hacer es añadir una flecha en ese elemento del menú para indicar que es desplegable y lo tengo que hacer en css. ¿Existe alguna forma de hacerlo?

No puedo modificar el html ni el javascript ya que no tengo acceso a ello. Solamente tengo acceso al archivo css.

Muchas gracias por vuestra ayuda!

[jonni09lo]

Seguro esa es la estructura? Si es así temo decirte que no es posible hacerlo solo con CSS ya que no existe un selector de hermanos que funcione con los anteriores.

En la 4 especificación de CSS puedes hacer esto:

Código CSS:

!a + .drop {
    /*Rules*/
}
 

Pero ningún navegador soporta esta especificación aún.

En cambio si la estructura fuese así

Código HTML:

<div class="drop"> 
    <ul> 
        <li> 
            <a href="#">enlace</a> 
        </li> 
    </ul> 
</div> 
<a href="#">enlace</a>
 

Solo con hacer esto te bastaría

Código CSS:

.drop + a {
    /*Rules*/
}
 

Saludos

[moriorGames]

Disculpa, puede que no me explicara bien. No es eso lo que pretendo, aunque no conocía ese operador css.

A lo que me refiero es a dar estilos css al padre de esos elementos, es decir, al elemento LI que está encima de ellos.

El elemento LI debe tomar ciertos estilos si tiene de hijo solamente un enlace y otros estilos si tiene de hijo enlace + div con clase drop. ¿Es eso posible? He indagado por ahí y parece que no es algo trivial, por eso acudo a ustedes a ver si alguien se ha encontrado con esta situación y tiene una respuesta en CSS .

[pzin]

No se puede, como ya te han dicho.

Puedes añadir un pseudo-elemento a la lista que hace las veces de submenú y añadir por ahí lo que necesites.

[moriorGames]

Ahí lo has dicho, es lo que me temía, que en css solamente no se puede hacer. La verdad es que la pregunta no es nivel Easy :)

Me ha sorprendido bastante que no se haya pensado en un operador de ese tipo en css, algo en plan Jquery ".selector:parent"

Ya me llevo algo más aprendido para la cama hoy.

Gracias!!

[g3kdigital]

Hola!.

Pues se me ocurre lo siguiente, no se si te ayuda:

Sí esa es la estructura que tienes (que no es la mejor) pero sí puedes acceder a ese elemento en especifico.

Puedes probar así:

.menu ul>li:nth-child(2)

Si vas a modificar la lista, que es el segundo hijo de ul.

Si necesitas es modificar el enlace, entonces:

.menu ul>li:nth-child(2) a

Sí lo que necesitas es una condición, es decir, algo así como un IF que detecte si el elemento posee anidaciones tipo menu, aparece el icono, en el momento no se puede con css, ni con css3 la especificación actual.

Ahora como añadir el icono, se me ocurren dos cosas:

1. Con background-image: cargas la url de la imagen o sprite.
Con background-position: lo pones 0 0 si lo quieres a la izq o 0% 100% si lo quieres a la der.
Con background-repeat: no-repeat; Para que no se repita.
Y con un padding-left o padding-right: Medidas que tiene de ancho e icono en la imagen, más pixeles de espacio entre el icono y el texto.

2. Con ::after o ::before, agregas el content: url (imagen.png), que es más rapido, pero un poco menos seteable. O si lo haces con tipos de fuentes svg, añades una cadena de texto.

Espero que esto te ayude, sino. Pues avisame e investigo a ver si puedo.