nuevos - selectores css



¿Hay un selector de padres CSS? (18)

¿Alguien ha sugerido algo como esto? Sólo una idea para el menú horizontal ...

parte de HTML

<div class='list'>
  <div class='item'>
    <a>Link</a>
  </div>
  <div class='parent-background'></div>
  <!-- submenu takes this place -->
</div>

parte de CSS

/* hide parent backgrounds... */
.parent-background {
  display: none; }

/* ... and show it when hover on children */
.item:hover + .parent-background {
  display: block;
  position: absolute;
  z-index: 10;
  top: 0;
  width: 100%; }

Demostración actualizada y el resto de código.

Otro ejemplo de cómo usarlo con entradas de texto: seleccione el campo de campo primario

https://code.i-harness.com

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

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 sea nativa del nivel 2 de CSS.

El menú que estoy tratando de diseñar está siendo expulsado por un CMS, por lo que no puedo mover el elemento activo al elemento <li> ... (a menos que haya un tema en el módulo de creación de menú que preferiría no hacerlo).

¿Algunas ideas?


Actualmente no hay manera de seleccionar el elemento primario de un elemento en CSS.

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

Mientras tanto, tendrá que recurrir a JavaScript si necesita seleccionar un elemento padre.

El borrador de trabajo del nivel 4 de los selectores incluye una pseudo-clase :has() que funciona igual que la implementación de jQuery . A partir de 2018, esto todavía no es compatible con ningún navegador .

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

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

Al menos hasta e incluyendo CSS3 no puedes seleccionar así. Pero se puede hacer con bastante facilidad hoy en día en JS, solo necesita agregar un poco de vainilla JavaScript, observe que el código es bastante corto.

      cells = document.querySelectorAll('div');
              [].forEach.call(cells, function (el) {
              //console.log(el.nodeName)
                if (el.hasChildNodes() && el.firstChild.nodeName=="A") {
                console.log(el)};
            });
            <div>Peter</div>
            <div><a href="#">Jackson link</a></div>
            <div>Philip</div>
            <div><a href="#">Pullman link</a></div>


Aquí hay un hack que usa pointer-events con hover :

<!doctype html>
<html>
	<head>
		<title></title>
		<style>
/* accessory */
.parent {
	width: 200px;
	height: 200px;
	background: gray;
}
.parent, 
.selector {
	display: flex;
	justify-content: center;
	align-items: center;
}
.selector {
	cursor: pointer;
	background: silver;
	width: 50%;
	height: 50%;
}
		</style>
		<style>
/* pertinent */
.parent {
	background: gray;
	pointer-events: none;
}
.parent:hover {
	background: fuchsia;
}
.parent 
.selector {
	pointer-events: auto;
}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="selector"></div>
		</div>
	</body>
</html>


Como mencionaron algunos otros, no hay una manera de estilizar a los padres de un elemento utilizando solo CSS, pero lo siguiente funciona con jQuery :

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

El W3C excluyó tal selector debido al gran impacto en el rendimiento que tendría en un navegador.


El selector de CSS " Combinador general de hermanos " podría usarse para lo que quiera:

E ~ F {
    property: value;
}

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


En CSS, podemos conectar en cascada a las propiedades de la jerarquía, pero no en la dirección del oppostite. Para modificar el estilo principal en un evento secundario, probablemente use jQuery.

$el.closest('.parent').css('prop','value');

Este es el aspecto más discutido de la especificación de nivel 4 de selectores . Con este selector podrá diseñar un elemento de acuerdo con su hijo utilizando un signo de exclamación después del selector (!).

Por ejemplo:

body! a:hover{
   background: red;
}

establecerá un color de fondo rojo si el usuario se desplaza sobre cualquier ancla.

Pero tenemos que esperar la implementación de los navegadores :(


Hay un complemento que extiende CSS para incluir algunas características no estándar que realmente pueden ayudar al diseñar sitios web. Se llama EQCSS .

Una de las cosas que EQCSS agrega es un selector principal. Funciona en todos los navegadores IE8 y superiores. Aquí está el formato:

@element 'a.active' {
  $parent {
    background: red;
  }
}

Así que aquí hemos abierto una consulta de elementos en cada elemento a.active , y para los estilos dentro de esa consulta, cosas como $parent tienen sentido porque hay un punto de referencia. El navegador puede encontrar el padre, porque es muy similar a parentNode en JavaScript.

Aquí hay una demostración de $parent y otra demostración de $parent que funciona en IE8 , así como una captura de pantalla en caso de que no tengas IE8 para probar .

EQCSS también incluye los meta-selectors $prev para el elemento antes de un elemento seleccionado, $this solo para aquellos elementos que coinciden con una consulta de elemento, y más.


La respuesta corta es NO , no tenemos un parent selector en esta etapa en CSS, pero si no tiene ningún modo de intercambiar los elementos o clases, la segunda opción es usar JavaScript, algo como esto:

var activeATag = Array.prototype.slice.call(document.querySelectorAll('a.active'));

activeATag.map(function(x) {
  if(x.parentNode.tagName === 'LI') {
    x.parentNode.style.color = 'red'; //your property: value;
  }
});

o una manera más corta si usas jQuery en tu aplicación:

$('a.active').parents('li').css('color', 'red'); //your property: value;

No creo que puedas seleccionar el padre solo en css.

Pero como parece que ya tienes una clase .active , ¿no sería más fácil mover esa clase a la li (en lugar de a )? De esa manera, puede acceder tanto a li como a través de css.


No hay selector de padres; De la misma manera no hay un selector de hermanos anterior. Una buena razón para no tener estos selectores es porque el navegador tiene que atravesar todos los elementos secundarios de un elemento para determinar si una clase debe aplicarse o no. Por ejemplo si escribiste:

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

Luego, el navegador tendrá que esperar hasta que haya cargado y analizado todo hasta que </body> determine si la página debe estar roja o no.

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


No, no puede seleccionar el padre solo en css.

Pero como parece que ya tienes una clase .active , ¿no sería más fácil mover esa clase a la li (en lugar de a )? De esa manera, puede acceder tanto a li como a través de css.


Puede utilizar este script .

*! > 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 selecciónelo cuando esté activo:

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

Echa un vistazo a este HTML:

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

puede seleccionar ese span.help cuando la input está activa y mostrarla:

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

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

Por cierto, funciona en IE.


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

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

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

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

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

li.active > a {
    property: value;
}





css-selectors