0

El código que me han dado tiene elementos que se pintan dinámicamente, son informativos y están dentro de un a, quisiera saber cómo puedo, teniendo el id de un div que se encuentra dentro de este a, seleccionar mediante CSS a ese a.

<a href="x">
     <div id="z">
     </div>
</a>

Entonces, teniendo el div #z, ¿cómo hago para seleccionar el nodo que encapsula a este div mediante css?

3
  • 3
    En css no existe un selector de nodo padre como tal. Existen varias soluciones posible, bien que añadas directamente una clase css al elemento en cuestión, o bien que uses javascript para añadir la clase dinámicamente.
    – Muriano
    Commented el 18 may. 2017 a las 16:39
  • Como nota adicional, mencionar que el borrador de css4 incluye un pseudo selector :has que funcionaría para tu caso, pero a día de escribir este comentario, ningún navegador es compatible con ello. :has selector MDN
    – Muriano
    Commented el 18 may. 2017 a las 16:41
  • Desde tu punto de vista (a)<--(div) tendrías que usar JavaScript / jQuery , ahora si quieres hacerlo a través de CSS tienes que verlo de otro punto de vista (a)-->(div).
    – fwBasic
    Commented el 18 may. 2017 a las 17:05

2 respuestas 2

2

Sólo mediante CSS no se puede aún, supuestamente hay peticiones para que la actualización a la especificación incluya poder referenciar "hacia atrás", pero así como está ahora no se puede. Entendiendo hacia atrás desde un hijo saber quien es el padre (una fatalidad genealógica, pero bueno....)

Si usas jQuery puedes posicionarte en un elemento y saber quien es su padre. Para ello tendrías que usar .parent() , .parents() , o .parentsUntil()

También podrías usar :parent, pero tal como indica la documentación, es parte de jQuery y no de CSS.

Sin jQuery puedes usar la propiedad parentElement del objeto DOM (ref. https://www.w3schools.com/jsref/prop_node_parentelement.asp)

0

Aqui te dejo un ejemplo de como acceder al elemento <a> desde <div> a traves del id y tambien un ejemplo de como acceder al elemento <a> a traves de una clase.

Ejemplo:

// a traves del id:
el = document.getElementById("z").parentElement;

console.log(el);

// a traves de una clase:
el = document.getElementsByClassName("z");

console.log(el);
console.log(el.length);

for(i = 0; i <el.length; i++) {
 console.log(el[i]);
 console.log(el.item(i));
 console.log(el.namedItem(i));
}
<a href="x" class="z">
     <div id="z">
     </div>
</a>

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