Pregunta ¿Hay un selector de padres CSS?


¿Cómo selecciono el <li> elemento que es un padre directo del elemento de anclaje?

En el ejemplo, mi CSS sería algo como esto:

li < a.active {
    property: value;
}

Obviamente, hay formas de hacerlo con JavaScript, pero espero que exista algún tipo de solución que exista en el nivel 2 de CSS.

El menú que intento estilizar está siendo arrojado por un CMS, por lo que no puedo mover el elemento activo al <li> elemento ... (a menos que tema el módulo de creación de menú que prefiero no hacer).

¿Algunas ideas?


2507
2018-06-18 19:59


origen


Respuestas:


Actualmente no hay forma de seleccionar el padre de un elemento en CSS.

Si había una manera de hacerlo, estaría en cualquiera de las especificaciones actuales de selectores de CSS:

Mientras tanto, tendrás que recurrir a JavaScript si necesitas seleccionar un elemento principal.


los Selectores Nivel 4 Borrador de trabajo incluye un :has() pseudo-clase que funciona igual que la Implementación jQuery. A partir de 2018, esto aún no es compatible con ningún navegador.

Utilizando :has() la pregunta original podría resolverse con esto:

li:has(> a.active) { /* styles to apply to the li tag */ }

2007
2018-06-18 20:16



No creo que puedas seleccionar el padre en css solamente.

Pero como parece que ya tienes .active clase, ¿no sería más fácil mover esa clase a la li (en vez de a)? De esa forma puedes acceder a ambos li y el a solo por css.


119
2018-06-18 20:08



Puedes usar esto guión.

*! > input[type=text] { background: #000; }

Esto seleccionará cualquier padre de una entrada de texto. Pero espera, todavía hay mucho más. Si lo desea, puede seleccionar un padre específico:

.input-wrap! > input[type=text] { background: #000; }

o seleccionarlo cuando está activo:

.input-wrap! > input[type=text]:focus { background: #000; }

Mira este HTML:

<div class="input-wrap">
    <input type="text" class="Name"/>
    <span class="help hide">Your name sir</span>
</div>

puedes seleccionar eso span.help cuando el input está activo y muéstrelo:

.input-wrap! .help > input[type=text]:focus { display: block; }

Hay muchas más capacidades; solo echa un vistazo a la documentación del complemento.

Por cierto, funciona en IE.


99
2017-08-13 10:13



Como lo mencionaron algunos otros, no hay una forma de estilo de los padres de un elemento utilizando solo CSS, pero el siguiente funciona con jQuery:

$("a.active").parents('li').css("property", "value");

74
2017-12-14 14:51



No hay selector de padres; del mismo modo que no hay un selector de hermanos anterior. Una buena razón para no tener estos selectores es porque el navegador debe atravesar todos los elementos secundarios de un elemento para determinar si se debe aplicar o no una clase. Por ejemplo, si escribió:

body:contains-selector(a.active) { background: red; }

Entonces el navegador tendrá que esperar hasta que se haya cargado y analizado todo hasta que el </body> para determinar si la página debe ser roja o no.

Este artículo Por qué no tenemos un selector principal lo explica en detalle.


44
2018-01-21 08:43



no hay una manera de hacer esto en css2. podrías agregar la clase al li y hacer referencia a la

li.active > a {
    property: value;
}

39
2018-06-18 20:06



El selector de CSS "Combinador hermano general"Podría usarse para lo que quieras:

E ~ F {
    property: value;
}

Esto coincide con cualquier F elemento que está precedido por un E elemento.


26
2018-06-30 14:00



Intenta cambiar a a block mostrar, y luego usar cualquier estilo que desee. aelemento se llenará li elemento y podrás modificar su aspecto como quieras. No te olvides de configurar li relleno a 0.

li {
  padding: 0;
  overflow: hidden;
}
a {
  display: block;
  width: 100%;
  color: ..., background: ..., border-radius: ..., etc...
}
a.active {
  color: ..., background: ...
}

24
2017-11-23 09:03



No en CSS 2 por lo que yo sé. CSS 3 tiene selectores más robustos pero no se implementa sistemáticamente en todos los navegadores. Incluso con los selectores mejorados, no creo que logre exactamente lo que ha especificado en su ejemplo.


19
2018-06-18 20:09



Sé que OP estaba buscando una solución de CSS, pero es fácil de lograr con jQuery. En mi caso, necesitaba encontrar el <ul> etiqueta principal para un <span> etiqueta contenida en el niño <li>. jQuery tiene el :has selector para que sea posible identificar un padre por los hijos que contiene:

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

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

$("li:has(.active)")

17
2018-05-16 22:04