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?
Respuestas
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