Este foro ya no está activo, así que no puedes publicar nuevas preguntas ni responder a las preguntas existentes.

¿Existe alguna forma de seleccionar con CSS el elemento padre de un elemento?

18 de junio de 2011

Tengo un menú generado por un CMS cuyo código HTML no puedo tocar. Mi problema es que quiero seleccionar el elemento <li> que sea padre de otro elemento de tipo <a>. El código CSS que he probado (y que no funciona) es el siguiente:

li < a.active {
    propiedad: valor;
}

Obviamente esto se puede hacer con JavaScript, pero me gustaría saber si existe una solución basada exclusivamente en CSS o CSS3. ¿Alguna idea?

Estás leyendo una traducción autorizada de la pregunta Is there a CSS parent selector? planteada por j3frea en StackOverflow.

Respuestas

#1

Actualmente no es posible seleccionar el padre de un elemento mediante CSS, ni siquiera con CSS3.

En el actual borrador de CSS 4 sí que se ha definido una pseudo-clase llamada :has() que funciona igual que jQuery. Aunque todavía no lo soporta ningún navegador (al menos en el momento de escribir este comentario, a mediados de 2014), este sería el código CSS4 que deberías utilizar:

li:has(> a.active) {
    /* estos estilos se aplican al elemento <li>*/
}

Así que ahora mismo la única alternativa que tienes es el uso de jQuery, que además funciona en todos los navegadores:

$("a.active").parents('li').css("propiedad", "valor");

@librosweb

6 octubre 2014, 18:04