¿Hay un selector principal de CSS?

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

Como ejemplo, mi CSS sería algo como esto:

li < a.active {
    property: value;
}

Obviamente, hay formas de hacer esto con JavaScript, pero espero que exista algún tipo de solución alternativa nativa de CSS Nivel 2.

El menú que estoy tratando de diseñar 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).

¿Alguna idea?

preguntado el 18 de junio de 09 a las 19:06

30 Respuestas

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

Si hubiera una forma de hacerlo, sería en cualquiera de las especificaciones de selectores CSS actuales:

Dicho esto, el Borrador de trabajo de selectores de nivel 4 incluye una :has() pseudoclase que proporcionará esta capacidad. Será similar al Implementación de jQuery.

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

Sin embargo, a partir de 2020, esto todavía no es compatible con ningún navegador.

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

Respondido 31 Jul 20, 11:07

Parecería que ya se ha sugerido y rechazado: stackoverflow.com/questions/45004/… - RobM

Parece que el selector de temas ha sido revisado, excepto mediante el uso de un ! ahora: The subject of the selector can be explicitly identified by appending an exclamation mark (!) to one of the compound selectors in a selector. - animuson ♦

El prefijo $ se veía mejor para mí ... el adjunto ! puede pasarse por alto más fácilmente. - Christoph

¡Gran giro de la trama! The Selectors 4 WD se acaba de actualizar rápido para excluir el indicador de asunto del perfil rápido, que será utilizado por las implementaciones de CSS. Si este cambio se mantiene, significa que ya no podrá usar el indicador de tema en las hojas de estilo (a menos que use agregar algún tipo de polyfill como el que se describe en otra respuesta): solo puede usarlo con la API de selectores y en cualquier otro lugar donde se pueda implementar el perfil completo. - BoltClock ♦

Otra actualización importante: parece que están considerando eliminar por completo la sintaxis del selector de temas y reemplazarla con la :has() pseudo todo el mundo ha llegado a conocer y amar de jQuery. El último ED ha eliminado todas las referencias al indicador de asunto y lo ha reemplazado con el :has() seudo. No sé las razones exactas, pero el CSSWG realizó una encuesta hace algún tiempo y los resultados deben haber influido en esta decisión. Es más probable que sea por compatibilidad con jQuery (para que pueda aprovechar qSA sin modificaciones) y porque la sintaxis del indicador de sujeto resultó demasiado confusa. - BoltClock ♦

No creo que pueda seleccionar el padre solo en CSS.

Pero como ya parece tener una .active clase, sería más fácil mover esa clase a la li (en vez de a). De esa forma puede acceder tanto a la li y a solo a través de CSS.

Respondido 25 Jul 19, 01:07

No puede mover el pseudo selector al elemento de la lista, ya que no es un elemento enfocable. Está usando el selector: active, por lo que cuando el ancla está activo, quiere que el elemento de la lista se vea afectado. Los elementos de la lista nunca estarán en estado activo. Aparte, es lamentable que no exista tal selector. Hacer que un menú CSS puro sea completamente accesible desde el teclado parece ser imposible sin él (usando selectores hermanos puede hacer que aparezcan submenús creados usando listas anidadas, pero una vez que la lista gana el foco, se vuelve a ocultar). Si hay alguna solución solo de CSS para este problema en particular - user914183

@Dominic Aquilina Eche un vistazo a la pregunta, el OP está usando una clase, no un pseudo selector. - Jeroen

Sí: :has()

Soporte del navegador: ninguna

Respondido el 10 de junio de 20 a las 13:06

CSS:has(':has') == false - Andrés

CSS:has(':has') === false - xdhmoore

Andrew y @xdhmoore, ¿puedes explicarme? - Yukulele

@ Yukulélé Perdón un poco de broma. El comentario de Andrew es una especie de juego de palabras con la palabra "tiene" como si fuera un operador de CSS que dice si CSS "tiene" una determinada característica. En este caso CSS no tiene la :has selector así CSS::has(':has') Es falso. Mi comentario se refiere al hecho de que es común que las personas en JavaScript recomendar el uso del === operador sobre el ==. - xdhmoore

De hecho, creo que hay sintaxis experimental equivalente a la declaración de Andrew: @supports selector(:has(a)) - xdhmoore

Puedes usar 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; }

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 input está activo y lo muestra:

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

Hay muchas más capacidades; simplemente consulte la documentación del complemento.

Por cierto, funciona en Internet Explorer.

Respondido 25 Jul 19, 01:07

suponga que usa jquery patent() sería más rápido. Sin embargo, esto necesita ser probado - Dan

@Idered Falla cuando tiene una declaración CSS de un Sujeto selector sin selector secundario (#a! solo arroja un error, #a! p funciona), por lo que los demás tampoco funcionarán debido a Uncaught TypeError: Cannot call method 'split' of undefined: ver jsfiddle.net/HerrSerker/VkVPs - Yunzen

@HerrSerker ¡Creo que #a! es un selector no válido, ¿qué debería seleccionar? - Ideado

@Idered No lo sé. La especificación no dice que sea ilegal. #¡a! debe seleccionarse a sí mismo. Al menos no debería haber ningún error en JavaScript - Yunzen

Según mi comentario sobre la respuesta aceptada, parece que el polyfill puede ser necesario incluso en un futuro cercano, después de todo, porque es posible que los navegadores nunca implementen el indicador de asunto en CSS. - BoltClock ♦

Como lo mencionaron algunos otros, no hay una manera de diseñar los elementos principales de un elemento usando solo CSS, pero lo siguiente funciona con jQuery:

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

contestado el 02 de mayo de 13 a las 09:05

El < El selector no existe (verificado con jQuery 1.7.1). - Rob W

Tal vez eso <-syntax funcionó en 2009 pero lo actualicé (para 2013). - Alastair

Aún mejor, use la función integrada de jQuery :has() selector: $("li:has(a.active)").css("property", "value");. Se lee de manera similar a la propuesta de CSS 4 ! selector. Ver también: :parent selector, .parents() Método, .parent() Método. - Rory O'Kane

Y en lugar de usar .css("property", "value") para diseñar los elementos seleccionados, normalmente debe .addClass("someClass") y tener en tu CSS .someClass { property: value } (vía). De esa manera, puede anotar el estilo con todo el poder de CSS y cualquier preprocesador que esté utilizando. - Rory O'Kane

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

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

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

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

Respondido 25 Jul 19, 01:07

así que haz que el navegador sea más rápido. Internet en sí más rápido. este selector es definitivamente necesario, y la razón para no implementarlo es, lamentablemente, porque vivimos en un mundo primitivo y lento. - vsync

en realidad, el selector haría que un navegador muy rápido pareciera lento. - Salman A

Confío en que a los desarrolladores de navegadores se les ocurra una implementación que sea (al menos) tan rápida como la versión de JavaScript, que es la que la gente acaba usando de todos modos. - Marc.2377

"vivimos en un mundo primitivo y lento" Tos con tos nuevo reloj de manzana Tos con tos - Marvin

@ Marc.2377 Si prueba el ejemplo anterior en JS en su sitio web, nunca lo visitaré. Por otro lado, diría que la mayoría de las veces, solo te preocupas por los hijos inmediatos, por lo que si solo se limitara a los hijos inmediatos, sería una buena adición sin demasiado impacto. - xryl669

No hay forma de hacer esto en CSS 2. Puede agregar la clase al li y hacer referencia al a:

li.active > a {
    property: value;
}

Respondido 25 Jul 19, 01:07

al hacer el bloque a element display: puede diseñarlo para que se ajuste a toda el área li. si puede explicar qué estilo está buscando, quizás pueda ayudarlo con una solución. - Josh

esta es en realidad una solución simple y elegante y, en muchos casos, tiene sentido establecer la clase en el padre. - Ricardo

Intenta cambiar a a block mostrar y, a continuación, utilice el estilo que desee. La a El elemento llenará el li elemento, y podrá modificar su aspecto como desee. 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: ...
}

Respondido 25 Jul 19, 01:07

El selector de CSS "Combinador general de hermanos”Tal vez podría usarse para lo que desea:

E ~ F {
    property: value;
}

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

Respondido 23 ago 17, 15:08

Esto es solo un selector de hermanos, no es hijo, padre ... realmente no responde a la pregunta compañero - Alireza

El pseudo elemento :focus-within permite seleccionar un padre si un descendiente tiene el foco.

Un elemento puede enfocarse si tiene un tabindex atributo.

Soporte del navegador para focus-inside

Tabindex

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>

respondido 20 mar '18, 16:03

Esto funciona bien en mi caso, ¡gracias! Solo un no, el ejemplo sería más ilustrativo si cambia el color al padre, no al hermano, esto es reemplazar .color:focus-within .change con .color:focus-within. En mi caso, estoy usando bootstrap nav-bar que agrega la clase a los niños cuando está activo y quiero agregar una clase al padre .nav-bar. Creo que este es un escenario bastante común en el que soy dueño del marcado, pero el componente css + js es bootstrap (u otro), por lo que no puedo cambiar el comportamiento. Aunque puedo agregar tabindex y usar este css. ¡Gracias! - cancerbero

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

Respondido el 19 de junio de 09 a las 00:06

Sé que el OP estaba buscando una solución CSS, pero es simple de lograr usando jQuery. 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:

$("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)")

contestado el 17 de mayo de 13 a las 02:05

O usar $yourSpan.closest("ul") y obtendrá el UL principal de su elemento span. Sin embargo, su respuesta es completamente fuera de tema en mi humilde opinión. Podemos responder a todas las preguntas relacionadas con CSS con una solución jQuery. - Robin van Baalen

Como se identificó en otras respuestas, no hay forma de hacer esto usando CSS 2. Dada esa restricción, la respuesta que proporcioné es una que sé que es efectiva y es la forma más sencilla de responder la pregunta usando javascript en mi humilde opinión. - David Clarke

Dados tus votos a favor, algunas personas están de acuerdo contigo. Pero la única respuesta sigue siendo la aceptada; simple y llanamente "no se puede hacer como usted quiere". Si la pregunta es cómo alcanzar 60 mph en una bicicleta y la respondes con "simple; súbete a un auto y pisa el acelerador", todavía no es una respuesta. De ahí mi comentario. - Robin van Baalen

Ese enfoque haría a SO casi completamente inútil. Busco SO para saber cómo resolver problemas, no encontrar la "única respuesta" que no aborda el problema. Es por eso que SO es tan asombroso, porque siempre hay más de una forma de despellejar a un gato. - David Clarke

Este es el aspecto más discutido de la Selectores Nivel 4 especificación. Con esto, un selector podrá diseñar un elemento de acuerdo con su hijo usando un signo de exclamación después del selector dado (!).

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 :(

Respondido 25 Jul 19, 01:07

Puede intentar usar un hipervínculo como padre y luego cambiar los elementos internos al pasar el mouse. Como 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 forma, puede cambiar el estilo en varias etiquetas internas, en función de la sustitución del elemento principal.

Respondido 16 Abr '20, 00:04

Eso es correcto, pero limita el código de marcado dentro del a etiqueta solo a ciertos elementos, si desea cumplir con los estándares XHTML. Por ejemplo, no puede utilizar un div en a, sin recibir una advertencia de infracción del esquema. - Ivaylo Slavov

¡Totalmente correcto Ivaylo! "a" es un elemento que no es de bloque, por lo que no puede usar elementos de bloque dentro de él. - tormenta de río

En HTML5 está perfectamente bien colocar elementos de bloque dentro de enlaces. - Matthew James Taylor

... si fuera semánticamente incorrecto, no lo habrían permitido en HTML5 donde antes no lo estaba. - BoltClock ♦

Aquí hay un truco usando 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>

Respondido 03 Oct 20, 10:10

Solo 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 del código

Otro ejemplo cómo usarlo con entradas de texto: seleccione el conjunto de campos principal

Respondido el 20 de junio de 20 a las 12:06

No tengo del todo claro cómo quiere generalizar esto a algunos / muchos / la mayoría de los casos de uso del selector principal, o incluso exactamente qué partes de este CSS están haciendo qué. ¿Puede agregar una explicación detallada? - Nathan Tuggy

No intenté aplicar esto a escenarios del mundo real, por eso digo "No para producción". Pero creo que se puede aplicar al menú de 2 niveles solo con un ancho de elemento fijo. "qué partes de este CSS están haciendo qué" - .test-sibling aquí es en realidad el fondo del elemento principal (la última línea de CSS). - Ilya B.

Explicación agregada (sección css de jsfiddle, comenzando desde "PARTE PRINCIPAL") ... Y estaba equivocado - puede haber cualquier número de subniveles. - Ilya B.

Actualmente no hay un selector de padres y ni siquiera se está discutiendo en ninguna de las charlas del W3C. Debe comprender cómo el navegador evalúa CSS para comprender realmente si lo necesitamos o no.

Aquí hay mucha explicación técnica.

Jonathan Snook explica cómo se evalúa CSS.

Chris Coyier sobre las conversaciones de Parent selector.

Harry Roberts de nuevo sobre la escritura de selectores CSS eficientes.

Pero Nicole Sullivan tiene algunos datos interesantes sobre tendencias positivas.

Todas estas personas son de primera clase en el campo del desarrollo de interfaces.

respondido 02 nov., 17:03

El need se define por los requisitos de los desarrolladores web, otros factores deciden si incluirlo en la especificación. - nicodemus13

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 agrega EQCSS es un selector principal. Funciona en todos los navegadores, Internet Explorer 8 en adelante. Este es el formato:

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

Así que aquí hemos abierto una consulta de elemento en cada elemento. a.activey para los estilos dentro de esa consulta, cosas como $parent tiene 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 otro $parent demostración que funciona en Internet Explorer 8, así como el libro electrónico una captura de pantalla en caso de que no tenga Internet Explorer 8 para probar con.

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

Respondido 25 Jul 19, 01:07

Ahora es 2019, y el último borrador del módulo de anidamiento CSS en realidad tiene algo como esto. Introduciendo @nest en las reglas.

3.2. La regla de anidación: @nest

Si bien el anidamiento directo se ve bien, es algo frágil. Algunos selectores de anidamiento válidos, como .foo &, no están permitidos, y editar el selector de ciertas formas puede invalidar la regla inesperadamente. Además, algunas personas encuentran difícil distinguir visualmente el anidamiento de las declaraciones circundantes.

Para ayudar en todos estos problemas, esta especificación define la regla @nest, que impone menos restricciones sobre cómo anidar válidamente las reglas de estilo. Su sintaxis es:

@nest = @nest <selector> { <declaration-list> }

La regla @nest funciona de manera idéntica a una regla de estilo: comienza con un selector y contiene declaraciones que se aplican a los elementos que coincide con el selector. La única diferencia es que el selector utilizado en una regla @nest debe contener un nido, lo que significa que contiene un selector de anidamiento en algún lugar. Una lista de selectores contiene nidos si todos sus selectores complejos individuales contienen nidos.

(Copie y pegue desde la URL anterior).

Ejemplo de selectores válidos bajo esta especificación:

.foo {
  color: red;
  @nest & > .bar {
    color: blue;
  }
}
/* Equivalent to:
   .foo { color: red; }
   .foo > .bar { color: blue; }
 */

.foo {
  color: red;
  @nest .parent & {
    color: blue;
  }
}
/* Equivalent to:
   .foo { color: red; }
   .parent .foo { color: blue; }
 */

.foo {
  color: red;
  @nest :not(&) {
    color: blue;
  }
}
/* Equivalent to:
   .foo { color: red; }
   :not(.foo) { color: blue; }
 */

Respondido el 20 de junio de 20 a las 12:06

Técnicamente, no hay una forma directa de hacer esto. Sin embargo, puede solucionarlo con jQuery o JavaScript.

Sin embargo, también puede 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 usando jQuery, aquí está la referencia para el selector principal de jQuery.

Respondido 25 Jul 19, 01:07

La respuesta corta es NO; no tenemos un parent selector en esta etapa en CSS, pero si no tiene que intercambiar los elementos o clases de todos modos, 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 forma más corta si usa jQuery en su aplicación:

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

Respondido 25 Jul 19, 01:07

or parentElement, sameshing - solo document.getElementById().parentElement Etc.- Andrés

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

Respondido 16 ago 11, 08:08

falso. debido a que el DOM es un árbol, tienen que ir al padre antes de llegar al hijo, por lo que simplemente retroceden un nodo. oo - NullVoxPopuli

Los selectores CSS son una cola so orden de selección se evalúa en lugar de la jerarquía XPath o DOM del documento. - Paul Sweatte

@rgb Al menos eso es lo que nos dijeron. - Yunzen

Aunque actualmente no hay un selector principal en CSS estándar, estoy trabajando en un proyecto (personal) llamado hacha (es decir. Sintaxis de selector de CSS aumentada / ACSSSS) que, entre sus 7 nuevos selectores, incluye tanto:

  1. an padre inmediato selector < (que permite que la selección opuesta >)
  2. an cualquier selector de ancestros ^ (que permite que la selección opuesta [SPACE])

hacha se encuentra actualmente en una etapa de desarrollo BETA relativamente temprana.

Vea una demostración aquí:

.parent {
  float: left;
  width: 180px;
  height: 180px;
  margin-right: 12px;
  background-color: rgb(191, 191, 191);
}

.child {
  width: 90px;
  height: 90px;
  margin: 45px;
  background-color: rgb(255, 255, 0);
}

.child.using-axe < .parent {
  background-color: rgb(255, 0, 0);
}
<div class="parent">
  <div class="child"></div>
</div>

<div class="parent">
  <div class="child using-axe"></div>
</div>


<script src="https://rouninmedia.github.io/axe/axe.js"></script>

En el ejemplo anterior < es la selector de padre inmediato, asi que

  • .child.using-axe < .parent

medio:

cualquier padre inmediato de .child.using-axe cual es .parent

Alternativamente, podría usar:

  • .child.using-axe < div

lo que significaría:

cualquier padre inmediato de .child.using-axe el cual es un div

Respondido el 19 de enero de 21 a las 17:01

El proyecto se encuentra en una etapa Beta temprana en la actualidad. Puede (al menos actualmente) activar selectores de ejes en sus estilos CSS al incluir <script src="https://rouninmedia.github.io/axe/axe.js"></script> al final de su documento html, justo antes </body>. - Rounin

¿Alguna idea?

CSS4 será elegante si agrega algunos manos dentro caminando hacia atrás. Hasta entonces es posible (aunque no aconsejable) usar checkbox y/o radio inputs a descanso la forma habitual en que las cosas están conectadas, y a través de eso también permiten que CSS opere fuera de su alcance normal ...

/* Hide things that may be latter shown */
.menu__checkbox__selection,
.menu__checkbox__style,
.menu__hidden {
  display: none;
  visibility: hidden;
  opacity: 0;
  filter: alpha(opacity=0); /* Old Microsoft opacity */
}


/* Base style for content and style menu */
.main__content {
  background-color: lightgray;
  color: black;
}

.menu__hidden {
  background-color: black;
  color: lightgray;
  /* Make list look not so _listy_ */
  list-style: none;
  padding-left: 5px;
}

.menu__option {
  box-sizing: content-box;
  display: block;
  position: static;
  z-index: auto;
}

/* &#9660; - \u2630 - Three Bars */
/*
.menu__trigger__selection::before {
  content: '\2630';
  display: inline-block;
}
*/

/* &#9660; - Down Arrow */
.menu__trigger__selection::after {
  content: "\25BC";
  display: inline-block;
  transform: rotate(90deg);
}


/* Customize to look more `select` like if you like */
.menu__trigger__style:hover,
.menu__trigger__style:active {
  cursor: pointer;
  background-color: darkgray;
  color: white;
}


/**
 * Things to do when checkboxes/radios are checked
 */

.menu__checkbox__selection:checked + .menu__trigger__selection::after,
.menu__checkbox__selection[checked] + .menu__trigger__selection::after {
  transform: rotate(0deg);
}

/* This bit is something that you may see elsewhere */
.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
  display: block;
  visibility: visible;
  opacity: 1;
  filter: alpha(opacity=100); /* Microsoft!? */
}


/**
 * Hacky CSS only changes based off non-inline checkboxes
 * ... AKA the stuff you cannot unsee after this...
 */
.menu__checkbox__style[id="style-default"]:checked ~ .main__content {
  background-color: lightgray;
  color: black;
}

.menu__checkbox__style[id="style-default"]:checked ~ .main__content .menu__trigger__style[for="style-default"] {
  color: darkorange;
}

.menu__checkbox__style[id="style-one"]:checked ~ .main__content {
  background-color: black;
  color: lightgray;
}

.menu__checkbox__style[id="style-one"]:checked ~ .main__content .menu__trigger__style[for="style-one"] {
  color: darkorange;
}

.menu__checkbox__style[id="style-two"]:checked ~ .main__content {
  background-color: darkgreen;
  color: red;
}

.menu__checkbox__style[id="style-two"]:checked ~ .main__content .menu__trigger__style[for="style-two"] {
  color: darkorange;
}
<!--
  This bit works, but will one day cause troubles,
  but truth is you can stick checkbox/radio inputs
  just about anywhere and then call them by id with
  a `for` label. Keep scrolling to see what I mean
-->
<input type="radio"
       name="colorize"
       class="menu__checkbox__style"
       id="style-default">
<input type="radio"
       name="colorize"
       class="menu__checkbox__style"
       id="style-one">
<input type="radio"
       name="colorize"
       class="menu__checkbox__style"
       id="style-two">


<div class="main__content">

  <p class="paragraph__split">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  </p>

  <input type="checkbox"
         class="menu__checkbox__selection"
         id="trigger-style-menu">
  <label for="trigger-style-menu"
         class="menu__trigger__selection"> Theme</label>

  <ul class="menu__hidden">
    <li class="menu__option">
      <label for="style-default"
             class="menu__trigger__style">Default Style</label>
    </li>

    <li class="menu__option">
      <label for="style-one"
             class="menu__trigger__style">First Alternative Style</label>
    </li>

    <li class="menu__option">
      <label for="style-two"
             class="menu__trigger__style">Second Alternative Style</label>
    </li>
  </ul>

  <p class="paragraph__split">
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

</div>

... bonito bruto, pero con solo CSS y HTML es posible tocar y volver a tocar cualquier cosa menos la body y :root desde casi cualquier lugar al vincular el id y for propiedades de radio/checkbox inputs y label dispara; es probable que alguien muestre cómo volver a tocarlos en algún momento.

Una advertencia adicional es que solo uno input de un específico id tal vez usado, primero checkbox/radio victorias un estado conmutado en otras palabras ... Pero múltiples etiquetas pueden apuntar a la misma input, aunque eso haría que tanto el HTML como el CSS parezcan aún más groseros.


... Espero que haya algún tipo de solución alternativa nativa de CSS Nivel 2 ...

No estoy seguro de las otras pseudoclases, pero :checked para pre-CSS 3. Si no recuerdo mal, era algo así como [checked] por eso puede encontrarlo en el código anterior, por ejemplo,

.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
 /* rules: and-stuff; */
}

... pero por cosas como ::after y :hover, No estoy del todo seguro en qué versión de CSS aparecieron por primera vez.

Dicho todo esto, por favor, nunca uses esto en la producción, ni siquiera con ira. Como una broma, claro, o en otras palabras, simplemente porque algo enlatado estar hecho no siempre lo significa debemos.

Respondido el 18 de Septiembre de 20 a las 20:09

Al menos hasta CSS 3 inclusive, no se puede seleccionar así. Pero hoy en día se puede hacer con bastante facilidad en JavaScript, solo necesita agregar un poco de JavaScript vainilla, tenga en cuenta 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>

Respondido 25 Jul 19, 01:07

No, no puede seleccionar el padre solo en CSS.

Pero como ya parece tener una .active clase, sería más fácil mover esa clase a la li (en vez de a). De esa forma puede acceder tanto a la li y a solo a través de CSS.

Respondido 25 Jul 19, 01:07

No hay un selector principal css (y, por lo tanto, en los preprocesadores css) debido a "Las principales razones por las que el Grupo de Trabajo CSS rechazó previamente las propuestas para los selectores principales están relacionadas con el rendimiento del navegador y los problemas de representación incremental".

Respondido el 31 de enero de 20 a las 18:01

El cambio de elemento principal basado en el elemento secundario solo puede suceder actualmente cuando tenemos un <input> elemento dentro del elemento padre. Cuando una entrada se enfoca, su elemento padre correspondiente puede verse afectado usando CSS.

El siguiente ejemplo le ayudará a comprender el uso :focus-within en CSS.

.outer-div {
  width: 400px;
  height: 400px;
  padding: 50px;
  float: left
}

.outer-div:focus-within {
  background: red;
}

.inner-div {
  width: 200px;
  height: 200px;
  float: left;
  background: yellow;
  padding: 50px;
}
<div class="outer-div">
  <div class="inner-div">
    I want to change outer-div(Background color) class based on inner-div. Is it possible?
    <input type="text" placeholder="Name" />
  </div>
</div>

Respondido 07 Jul 19, 03:07

Contrataría código JavaScript para hacer eso. Por ejemplo, en React cuando itera sobre una matriz, agregue otra clase al componente principal, lo que indica que contiene a sus hijos:

<div className={`parent ${hasKiddos ? 'has-kiddos' : ''}`}>
    {kiddos.map(kid => <div key={kid.id} />)}
</div>

Y luego simplemente:

.parent {
    color: #000;
}

.parent.has-kiddos {
    color: red;
}

Respondido el 02 de enero de 20 a las 18:01

Prueba esto ...

Esta solución utiliza reglas simples de CSS2 sin Javascript y funciona en todos los navegadores, antiguos y nuevos.. Cuando se hace clic, el niño anchor etiqueta activa su active evento de pseudo-clase. Entonces simplemente se esconde, permitiendo que el active evento para burbujear hasta el padre li tag que luego se rediseña y revela a su hijo ancla nuevamente con un nuevo estilo. El niño ha diseñado al padre.

Usando tu ejemplo:

<ul>
    <li class="listitem">
        <a class="link" href="#">This is a Link</a>
    </li>
</ul>

Ahora aplique estos estilos con el active pseudo-clase en a para cambiar el estilo del padre li etiqueta cuando se hace clic en el enlace:

a.link {
    display: inline-block;
    color: white;
    background-color: green;
    text-decoration: none;
    padding: 5px;
}

li.listitem {
    display: inline-block;
    margin: 0;
    padding: 0;
    background-color: transparent;
}

/* When this 'active' pseudo-class event below fires on click, it hides itself,
triggering the active event again on its parent which applies new styles to itself and its child. */

a.link:active {
    display: none;
}

.listitem:active {
    background-color: blue;
}

.listitem:active a.link {
    display: inline-block;
    background-color: transparent;
}

Debería ver que el enlace con un fondo verde ahora cambia al fondo azul del elemento de la lista al hacer clic.

enter image description here

recurre a

enter image description here

al hacer clic.

respondido 01 mar '21, 20:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.