Hay un CSS padre selector?

Question

¿Cómo puedo seleccionar el <li> elemento que es una matriz directa del elemento ancla?

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

li < a.active {
    property: value;
}

Obviamente, hay maneras de hacer esto con JavaScript, pero tengo la esperanza de que hay algún tipo de solución que existe nativa de CSS Nivel 2.

El menú que estoy tratando de estilo es ser vomitada por un CMS, así que no puedo mover el elemento activo para el <li> elemento...(a menos que el tema de la creación del menú del módulo de la que prefiero no hacer).

Alguna idea?

Answer 1

Actualmente no hay forma 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 CSS:

• Especificaciones de selectores de nivel 3
• Especificaciones de los selectores CSS 2.1

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

---

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

Usando <=> la pregunta original podría resolverse con esto:

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

Answer 2

No & # 8217; creo que puede seleccionar el padre solo en CSS.

Pero como ya parece tener una clase .active, ¿no sería & # 8217; ¿sería más fácil mover esa clase a li (en lugar de a)? De esa manera, puede acceder tanto a <=> como a <=> solo a través de CSS.

Answer 3

Puede 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; }

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 el input está activo y mostrarlo:

.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.

Answer 4

Como se mencionó por un par de otros, no hay una manera de diseñar el / los padre / s de un elemento usando solo CSS, pero lo siguiente funciona con jQuery :

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

Answer 5

No hay selector principal; tal como no hay un selector de hermanos anterior. Una buena razón para no tener estos selectores es porque el navegador tiene que recorrer 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; }

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

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

Answer 6

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

li.active > a {
    property: value;
}

Answer 7

sí: :has()

compatibilidad con el navegador: none

Answer 8

Al intentar cambiar de a a block de la pantalla y, a continuación, utilizar cualquier estilo que desee. a elemento de relleno li elemento y usted será capaz de modificar su apariencia como usted desea.No olvides poner li relleno a 0.

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

Answer 9

El selector CSS & # 8220; Combinador general de hermanos & # 8221; tal vez podría usarse para lo que quieres:

E ~ F {
    property: value;
}

Esto coincide con cualquier elemento F precedido por un elemento E.

Answer 10

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

Answer 11

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

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

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

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

Answer 12

Este es el aspecto más discutido de la especificación Selectores Nivel 4 . Con este selector podrá diseñar un elemento de acuerdo con su elemento secundario utilizando 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 :(

Answer 13

Puede intentar usar el hipervínculo como padre y luego cambiar los elementos internos al pasar el mouse sobre él. Así:

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 del rollover del elemento principal.

Answer 14

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

Un elemento puede enfocarse si tiene un atributo tabindex.

Soporte del navegador para enfocar dentro

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>

Answer 15

¿Alguien ha sugerido algo como esto? 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%; }

Demo actualizada y el resto del código

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

Answer 16

Actualmente no hay un selector principal & amp; ni siquiera se discute en ninguna de las conversaciones del W3C. Debe comprender cómo evalúa CSS el navegador 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 sobre las conversaciones del selector de padres .

Harry Roberts nuevamente al escribir selectores CSS eficientes .

Pero Nicole Sullivan tiene algunos datos interesantes sobre tendencias positivas .

Estas personas son todas de primera clase en el campo del desarrollo front-end.

Answer 17

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

Entonces, aquí hemos abierto una consulta de elemento 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 $prev y otra $this demostración que funciona en IE8 , así como una captura de pantalla en caso de que no tenga IE8 para probar con .

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

Answer 18

Técnicamente no hay una forma directa de hacerlo, sin embargo, puede ordenarlo 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 usando jQuery aquí está la referencia para jQuery parent selector

Answer 19

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

Answer 20

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, 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 de manera más corta si usa jQuery en su aplicación:

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

Answer 21

Ahora es 2019, y el último borrador del Módulo de anidamiento CSS realmente tiene algo como esto. Presentamos @nest at-rules.

  

3.2. La regla de anidamiento: @nest

     

Si bien la anidación directa se ve bien, es algo frágil. Algunos selectores de anidamiento válidos, como .foo & Amp ;, no están permitidos, y editar el selector de ciertas maneras puede invalidar la regla inesperadamente. Además, algunas personas encuentran el anidamiento difícil de distinguir visualmente 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 nidos, lo que significa que contiene un selector de anidamiento en alguna parte. Una lista de selectores contiene nidos si todos sus selectores complejos individuales contienen nidos.

(copiado y pegado de 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; }
 */

Answer 22

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

1. un padre primario selector < (que habilita la selección opuesta a >)
2. un cualquier selector de ancestros ^ (que habilita la selección opuesta a [SPACE])

ax 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 a la izquierda con estilo con selectores estándar y las dos listas a la derecha con estilo con selectores de hacha)

Answer 23

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>

Answer 24

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

Answer 25

No, no puede seleccionar el padre solo en CSS.

Pero como parece que ya tiene una clase .active, ¿no sería & # 180; ¿sería más fácil mover esa clase a li (en lugar de a)? De esa manera, puede acceder tanto a <=> como a <=> solo a través de CSS.

Answer 26

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

Answer 27

Alguna idea?

CSS 4 va a ser de lujo si se añade algo de ganchos en caminar hacia atrás.Hasta entonces, es posible (aunque no recomendable) para el uso de checkbox y/o radio inputs a romper la forma habitual de que las cosas están conectadas, y a través de que también permiten la CSS para operar fuera de su ámbito 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 MS 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;
}

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

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


/* Customize to look more `select` like if ya 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 ya 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); /* MS!? */
}


/**
 * 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 ya 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>

...bastante bruto pero solo con CSS y HTML es posible tocar y volver a tocar algo, pero la body y :root desde cualquier lugar mediante la vinculación de la id y for propiedades de radio/checkbox inputs y label los desencadenadores;probable que alguien va a mostrar cómo volver a tocar esas en algún momento.

Una limitación adicional es que sólo uno input de un determinado id tal vez utilizado, primero checkbox/radio gana un tensado de estado, en otras palabras... Pero varias etiquetas puede apuntar a todos el mismo input, a pesar de que iba a hacer tanto el HTML y CSS un aspecto aún más burdos.

---

...Tengo la esperanza de que hay algún tipo de solución que existe nativa de CSS Nivel 2...

No estoy seguro acerca de los otros : selectores pero :checked para la pre-CSS3, si mal no recuerdo era algo así como [checked] cual es la razón por la que usted puede encontrar en el código anterior, por ejemplo,...

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

...pero las cosas como ::after y :hover No estoy del todo seguro de cuál versión de CSS aquellos que apareció por primera vez.

Que todos indicada, por favor no use nunca esta en producción, aunque no en ira, como una broma seguro, o en otras palabras, sólo porque algo puede hacer no siempre significa debe.

Answer 28

Contrataría un código JS para hacer eso. p.ej. en ReactJS cuando itera sobre una matriz, agregue otra clase al componente padre, lo que indica que contiene sus hijos:

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

Y luego simplemente:

.parent {
    color: #000;
}

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

Answer 29

@documento

Aunque técnicamente no es un padre selector es se permite seleccionar la dirección URL de la página que está a punto de "padre de familia" como se pone.Por favor, tenga en cuenta que usted tendrá que abogar por este (véase la parte inferior de este post para más instrucciones).Voy a actualizar este post una vez que este método es viable por los autores de la web.

Digamos que usted desea cambiar la background-image de la guardia de la cabecera de cada página.El código HTML sería generalmente el siguiente aspecto:

<body>

<main id="about_"></main>

<header><nav></nav></header>

</body>

La adición de un id el atributo de la head y body los elementos no es profesional y que no cumplen con la Web 3.0.Sin embargo, mediante la selección de la URL usted no tiene que agregar el código HTML en cualquier sentido:

@document url('https://www.example.com/about/')
{
 body > header
 {
  background-image: url(about.png);
 }
}

Porque son un profesional (que son, no?) usted siempre prueba el código local antes de implementarlo en el servidor en vivo.De manera estática de direcciones Url no se va a trabajar en localhost, 127.0.0.1, :1 y así sucesivamente - por defecto.Eso implica que si vas con éxito de la prueba y comprobar el código que vas a necesitar para ejecutar scripts del lado del servidor en tu CSS.Eso también implica que si permite a los usuarios ejecutar CSS de su sitio web que usted debe asegurarse de su Código CSS no se puede ejecutar scripts del lado del servidor, aunque el tuyo puede.La mayoría de la gente que se encuentra este parte de la post útil puede no estar seguro de cómo acercarse a ella y todo se reduce a la forma de organizar su entorno de trabajo.

1. Siempre ejecutar su entorno local en RAID 1, 5, 6, 1+0 o 0+1 (lo que comúnmente se confunde con el inexistente "RAID 10" y 0+1 y 1+0 se muy animales diferentes).
2. No guarde su trabajo (y archivos personales) en la misma unidad como sistema operativo;usted se ser formatear, finalmente, si usted está en el humor o no.
3. Su ruta de acceso raíz debe ser algo como esto (en un WAMP (Windows, Apache, MariaDB y PHP) servidor): D:\Web\Version 3.2\www.example.com\.
4. En PHP se comenzará con su $_SERVER['DOCUMENT_ROOT'] (usted puede determinar un SO Linux a través de if (substr($_SERVER['DOCUMENT_ROOT'],0,1) == '/') {} condición).
5. Mantener copias de las versiones anteriores debido a que usted necesita para ver las copias de trabajo en caso de que la olvide y se atornilla algo, por lo tanto el control de versiones.

El siguiente presume que la de tu servidor utiliza www. (https://www.example.com/ en lugar de https://example.com/):

<?php
if (!isset($_SERVER['HTTP_HOST']))
{
//Client does not know what domain they are requesting, return HTTP 400.
}
else
{
 //Get the domain name.
 if (substr($_SERVER['HTTP_HOST'],0,4) === 'www.')
 {//Live Server
  $p0 = explode('www.',$_SERVER['HTTP_HOST'],2);
  $domain = $p0[1];
 }
 else
 {//localhost
  $p0 = explode('www.',$_SERVER['REQUEST_URI']);

  if (isset($p0[2]))
  {
   $p1 = explode('/',$p0[2],2);
   $domain = $p1[0];
  }
  else
  {
   $p1 = explode('/',$p0[1],2);
   $domain = $p1[0];
  }
 }


 //Now reconstruct your *relative* URL.
 if (isset($_SERVER['HTTPS'])) {$https = 'https';}
 else {$https = 'http';}

 $p0 = explode('www.',$_SERVER['HTTP_HOST']);

 if (stristr($_SERVER['HTTP_HOST'],'www.'))
 {
  $a = array('p1'=>$https.'://www.'.$domain, 'p2'=>'/');
 }
 else
 {
  $dir_ver = explode('/www.',$_SERVER['REQUEST_URI']);

  if ($_SERVER['HTTP_HOST']=='localhost' || $_SERVER['HTTP_HOST']==$_SERVER['SERVER_NAME'])
  {
   $p0 = explode($domain,$_SERVER['REQUEST_URI']);
   $a = array('p1'=>$https.'://'.$_SERVER['HTTP_HOST'], 'p2'=>htmlspecialchars($p0[0].$domain).'/');
  }
  else if (substr($_SERVER['HTTP_HOST'],0,7)=='192.168' || substr($_SERVER['HTTP_HOST'],0,4)=='127.')
  {
   $p0 = explode($domain,$_SERVER['REQUEST_URI']);
   $a = array('p1'=>$https.'://'.$_SERVER['HTTP_HOST'], 'p2'=>htmlspecialchars($p0[0].$domain).'/');
  }
 }

 print_r($a);
}
?>

El $a volverá dos partes de la URL.Su portada o en la página web de la URL de la raíz será la / así que/ sería about/ una vez que explode o split cuando se comparan las cadenas.Que conseguirá que aproximadamente el 80% de la forma (tanto para los locales y pruebas en vivo) para que pueda ejecutar el mismo código en ambos entornos y utilizarlo en el CSS para reconstruir la Url.

Compatibilidad Del Navegador

Como de 2019 sólo Gecko 61+ compatible con esta función y sólo detrás de una bandera.Ya he defendido que se convierte en utilizable por los autores de la web.David Barón es el autor de CSS Reglas Condicionales Módulo de Nivel 3.El principal razonamiento de que un CSS real "de los padres selector" no existe, es porque el impacto en el rendimiento;este método sería negar el impacto en el rendimiento.Yo también abogó por que las Url relativas, deben ser apoyados en la presencia del HTML base elemento.Si estás leyendo esto, o no mucho después de que el año 2019 (hola a todo el mundo en el año 47,632!) por favor primero hacer referencia a la siguiente URL:

• https://developer.mozilla.org/en-US/docs/Web/CSS/@document
• https://www.w3.org/TR/css3-conditional/

Answer 30

El cambio del elemento primario basado en el elemento secundario puede ocurrir cuando tenemos un elemento de entrada dentro del elemento primario. cuando una entrada se enfoca, su elemento padre correspondiente se reflejará usando css.

El siguiente ejemplo le hará comprender el uso de :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>