0

Me gustaría gestionar en CSS3 varios selectores dependiendo de un evento sin que el nodo en el que ocurra el evento sea el padre.

Por ejemplo, digamos que si yo hago un hover sobre un enlace, otro elemento en la web se active o se ponga display:block, sin que ello conlleve que tanto el enlace como el otro elemento, tenga que ser hermanos o uno sea hijo del otro.

No sé si esto es posible o tendré que hacerlo en JavaScript/jQuery directamente.

3
  • 1
    Podrias aportar un ejemplo de lo que quieres hacer? La pregunta no es demasiado clara. Commented el 31 may. 2017 a las 9:03
  • Digamos que si yo hago un hover sobre un enlace , otro elemento en la web se active o se ponga "display:block" , sin que ello conlleve que tanto el enlace como el otro elemento , tenga que ser hermanos o uno sea hijo del otro. lo siento no me explico muy bien Commented el 31 may. 2017 a las 10:39
  • Va a depender de la estructura que tenga tu HTML, por eso te diría que si tienes algún caso específico, lo compartas. Si no, las respuestas pueden acabar siendo algo genéricas y no ajustándose bien a tu caso particular.
    – Alvaro Montoro
    Commented el 31 may. 2017 a las 11:37

1 respuesta 1

0

No, no puedes hacerlo exclusivamente con css.

Como el propio nombre indica css define estilos en cascada por lo que la definición únicamente va en una dirección.

Sí puedes definir un estilo para un elemento que dependa del estado de un elemento padre, pero nunca a la inversa.

Si el elemento al que quieres aplicar el estilo no es un descendiente del elemento cuyo estado quieres comprobar (en el ejemplo que planteas sobre el que realizas el hover) únicamente tienes dos opciones:

  • Modificar la jerarquía de los elementos del DOM (no siempre será posible)
  • Utilizar javascript
3
  • Gracias por la respuesta . Commented el 31 may. 2017 a las 11:25
  • 1
    Esto no es del todo correcto. En CSS se pueden definir estilos en más de una dirección: hacia abajo (descendientes, el caso que pones), hacia el lado (con selectores de "hermanos": ~ o +), en diagonal (combinando los laterales y hacia abajo) y, aunque no está soportado aún por los navegadores, los selectores de nivel 4 de CSS incluyen una pseudo-clase relacional que permite seleccionar "ancestros" (:has()) que permitiría ir hacia "arriba".
    – Alvaro Montoro
    Commented el 31 may. 2017 a las 11:25
  • Bien puntualizado Álvaro. De hecho pensé en incluir esos casos cuando escribí la respuesta pero pensé que podía quedar menos clara para juan antonio. En cualquier caso una puntualización importante. Commented el 1 jun. 2017 a las 15:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.