nuevos - ¿Hay un selector de padres CSS?
selector padre css (26)
¿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
¿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 */ }
Actualmente no hay un selector de padres y ni siquiera se está discutiendo en ninguna de las charlas del W3C. Debe comprender cómo CSS evalúa el CSS para comprender realmente si lo necesitamos o no.
Hay mucha explicación técnica aquí.
Jonathan Snook explica cómo se evalúa CSS .
Chris Coyier habla sobre el selector de padres .
Harry Roberts vuelve a escribir selectores CSS eficientes .
Pero Nicole Sullivan tiene algunos datos interesantes sobre las tendencias positivas .
Estas personas son todas de primera clase en el campo del desarrollo frontal.
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>
Aunque actualmente no hay un selector principal en el CSS estándar, estoy trabajando en un proyecto (personal) llamado ax (es decir, Sintaxis del Selector de CSS Aumentado / ACSSSS ) que, entre sus 7 nuevos selectores, incluye ambos:
- un selector primario inmediato
<(que permite la selección opuesta a>) - cualquier selector ancestral
^(que habilita la selección opuesta a[SPACE])
El hacha se encuentra actualmente en una etapa de desarrollo BETA relativamente temprana.
Vea una demostración aquí:
http://rounin.co.uk/projects/axe/axe2.html
(Compare las dos listas en el estilo izquierdo con selectores estándar y las dos listas en el estilo derecho con selectores de hacha)
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 pseudoelemento :focus-within permite seleccionar un padre si un descendiente tiene enfoque.
Un elemento puede enfocarse si tiene un atributo tabindex .
Soporte del navegador para enfocar dentro de
Ejemplo
.click {
cursor: pointer;
}
.color:focus-within .change {
color: red;
}
.color:focus-within p {
outline: 0;
}
<div class="color">
<p class="change" tabindex="0">
I will change color
</p>
<p class="click" tabindex="1">
Click me
</p>
</div>
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'');
Es posible con ampersand en SASS:
h3
font-size: 20px
margin-bottom: 10px
.some-parent-selector &
font-size: 24px
margin-bottom: 20px
Salida CSS:
h3 {
font-size: 20px;
margin-bottom: 10px;
}
.some-parent-selector h3 {
font-size: 24px;
margin-bottom: 20px;
}
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.
Intente cambiar a para block pantalla y luego use el estilo que desee. a elemento llenará el elemento li y podrá modificar su aspecto como desee. No te olvides de poner li padding en 0.
li {
padding: 0;
overflow: hidden;
}
a {
display: block;
width: 100%;
color: ..., background: ..., border-radius: ..., etc...
}
a.active {
color: ..., background: ...
}
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 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.
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 intentar utilizar el hipervínculo como elemento primario y luego cambiar los elementos internos al desplazarse. Me gusta esto:
a.active h1 {color:red;}
a.active:hover h1 {color:green;}
a.active h2 {color:blue;}
a.active:hover h1 {color:yellow;}
De esta manera, puede cambiar el estilo en varias etiquetas internas, en función del rollover del elemento padre.
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)")
Técnicamente no hay una forma directa de hacer esto, sin embargo, puede ordenar eso con jquery o javascript.
Sin embargo, también puedes hacer algo como esto.
a.active h1 {color:blue;}
a.active p {color: green;}
jQuery
$("a.active").parents(''li'').css("property", "value");
Si desea lograr esto utilizando jQuery, aquí está la referencia para el selector padre jQuery
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;
}