Saltar al contenido

Selector CSS complejo para padre o hijo activo

Solución:

Según Wikipedia:

Los selectores no pueden ascender

CSS no ofrece ninguna forma de seleccionar un padre o un antepasado de un elemento que satisfaga ciertos criterios. Un esquema de selección más avanzado (como XPath) permitiría hojas de estilo más sofisticadas. Sin embargo, las principales razones por las que el Grupo de Trabajo de CSS rechazó las propuestas de selectores principales están relacionadas con el rendimiento del navegador y los problemas de representación incremental.

Y para cualquiera que busque SO en el futuro, esto también podría denominarse selector de ancestros.

Actualizar:

La especificación de Selectores de nivel 4 le permite seleccionar qué parte de la selección es el tema:

El asunto del selector se puede identificar explícitamente anteponiendo un signo de dólar ($) a uno de los selectores compuestos en un selector. Aunque la estructura de elementos que representa el selector es la misma con o sin el signo de dólar, indicar el sujeto de esta manera puede cambiar qué selector compuesto representa al sujeto en esa estructura.

Ejemplo 1:

Por ejemplo, el siguiente selector representa un elemento de lista LI hijo único de una lista ordenada OL:

OL > LI:only-child

Sin embargo, el siguiente representa una lista ordenada OL que tiene un hijo único, ese hijo es un LI:

$OL > LI:only-child

Las estructuras representadas por estos dos selectores son las mismas, pero los sujetos de los selectores no lo son.

Aunque esto no está disponible (actualmente, noviembre de 2011) en ningún navegador o como selector en jQuery.

Desafortunadamente, no hay forma de hacer eso con CSS.

Sin embargo, no es muy difícil con JavaScript:

// JavaScript code:
document.getElementsByClassName("active")[0].parentNode;

// jQuery code:
$('.active').parent().get(0); // This would be the <a>'s parent <li>.

Llega tarde a la fiesta de nuevo, pero por lo que vale, es posible usar jQuery para ser un poco más conciso. En mi caso necesitaba encontrar el <ul> etiqueta de padre para un <span> etiqueta contenida en el niño <li>. jQuery tiene el :has selector para que sea posible identificar a un padre por los hijos que contiene (actualizado según la referencia del comentario de @ Afrowave: https://api.jquery.com/has-selector/):

$("ul").has("#someId")

seleccionará el ul elemento que tiene un elemento hijo con id algo. O para responder a la pregunta original, algo como lo siguiente debería funcionar (no probado):

$("li").has(".active")
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *