Esiste un selettore padre CSS?

https://stackoverflow.com/questions/1014861

06-07-2019
|

Domanda

Come posso selezionare l'elemento <li> che è un genitore diretto dell'elemento anchor?

Ad esempio il mio CSS sarebbe qualcosa del genere:

li < a.active {
    property: value;
}

Ovviamente ci sono modi per farlo con JavaScript, ma spero che esista una sorta di soluzione alternativa nativa al livello CSS 2.

Il menu che sto provando a mettere in stile è stato vomitato da un CMS, quindi non posso spostare l'elemento attivo sull'elemento <=> ... (a meno che non tema il modulo di creazione del menu che preferirei non fare).

Qualche idea?

Soluzione

Al momento non è possibile selezionare il genitore di un elemento in CSS.

Se ci fosse un modo per farlo, sarebbe in una delle attuali specifiche dei selettori CSS:

Nel frattempo, dovrai ricorrere a JavaScript se devi selezionare un elemento genitore.

La Bozza di lavoro di livello 4 dei selettori include una pseudo-classe :has() che funziona allo stesso modo della implementazione di jQuery . A partire dal 2019, questo non è ancora supportato da nessun browser .

Utilizzando <=> la domanda originale potrebbe essere risolta con questo:

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

Altri suggerimenti

I don & # 8217; t penso che puoi selezionare il genitore solo in CSS.

Ma siccome sembra che tu abbia già una classe .active, non & # 8217; t sarebbe più semplice spostare quella classe in li (invece che in a)? In questo modo puoi accedere sia a <=> sia a <=> solo tramite CSS.

Puoi utilizzare questo script .

*! > input[type=text] { background: #000; }

Questo selezionerà qualsiasi genitore di un input di testo. Ma aspetta, c'è ancora molto di più. Se lo desideri, puoi selezionare un genitore specificato:

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

o selezionalo quando è attivo:

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

Dai un'occhiata a questo HTML:

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

puoi selezionarlo span.help quando input è attivo e mostrarlo:

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

Ci sono molte più capacità; basta consultare la documentazione del plugin.

A proposito, funziona in IE.

Come menzionato da un paio di altri, non esiste un modo per modellare i genitori di un elemento usando solo CSS ma quanto segue funziona con jQuery :

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

Non esiste un selettore principale; proprio come non esiste un precedente selettore di pari livello. Un buon motivo per non avere questi selettori è perché il browser deve attraversare tutti i figli di un elemento per determinare se applicare o meno una classe. Ad esempio se hai scritto:

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

Quindi il browser dovrà attendere fino a quando non avrà caricato e analizzato tutto fino a </body> per determinare se la pagina deve essere rossa o meno.

Questo articolo Perché non abbiamo un selettore principale lo spiega in dettagli.

non c'è modo di farlo in css2. potresti aggiungere la classe a li e fare riferimento a a

li.active > a {
    property: value;
}

sì: :has()

supporto browser: none

Prova a passare da a a block display, quindi usa lo stile che desideri. L'elemento li riempirà <=> l'elemento e sarai in grado di modificarne l'aspetto come desideri. Non dimenticare di impostare <=> riempimento su 0.

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

Il selettore CSS & # 8220; General Sibling Combinator <> # 8221!; potrebbe essere usato per quello che vuoi:

E ~ F {
    property: value;
}

Corrisponde a qualsiasi F elemento preceduto da un E elemento.

Non in CSS 2 per quanto ne so. CSS 3 ha selettori più robusti ma non è implementato in modo coerente su tutti i browser. Anche con i selettori migliorati, non credo che realizzerà esattamente ciò che hai specificato nel tuo esempio.

So che l'OP stava cercando una soluzione CSS ma è semplice da ottenere usando jQuery. Nel mio caso, dovevo trovare il <ul> tag principale per un <span> tag contenuto nel figlio <li>. jQuery ha il selettore :has, quindi è possibile identificare un genitore dai figli che contiene:

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

selezionerà l'elemento ul che ha un elemento figlio con id someId . O per rispondere alla domanda originale, qualcosa come il seguente dovrebbe fare il trucco (non testato):

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

Questo è l'aspetto più discusso della specifica Selettori di livello 4 . Con questo selettore sarà in grado di modellare un elemento in base al suo figlio usando un punto esclamativo dopo il selettore dato (!).

Ad esempio:

body! a:hover{
   background: red;
}

imposterà un colore di sfondo rosso se l'utente passa sopra un punto di ancoraggio.

Ma dobbiamo aspettare l'implementazione dei browser :(

Potresti provare a utilizzare il collegamento ipertestuale come genitore, quindi modificare gli elementi interni al passaggio del mouse. In questo modo:

a.active h1 {color:red;}

a.active:hover h1 {color:green;}

a.active h2 {color:blue;}

a.active:hover h1 {color:yellow;}

In questo modo puoi cambiare lo stile in più tag interni, in base al rollover dell'elemento genitore.

Lo pseudo elemento :focus-within consente di selezionare un genitore se un discendente ha lo stato attivo.

Un elemento può essere focalizzato se ha un attributo tabindex.

Supporto browser per focus-inside

Tabindex

Esempio

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

Qualcuno ha suggerito qualcosa del genere? Solo un'idea per menu orizzontale ...

parte di HTML

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

parte di 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 aggiornata e il resto del codice

Un altro esempio come usarlo con input di testo - seleziona il set di campi principale

Attualmente non esiste un selettore genitore & amp; non viene nemmeno discusso in nessuno dei discorsi del W3C. Devi capire come viene valutato il CSS dal browser per capire se ne abbiamo bisogno o meno.

Ci sono molte spiegazioni tecniche qui.

Jonathan Snook spiega come viene valutato il CSS .

Chris Coyier sui colloqui del selettore dei genitori .

Harry Roberts di nuovo sulla scrittura di efficienti selettori CSS .

Ma Nicole Sullivan ha alcuni fatti interessanti sulle tendenze positive .

Queste persone sono tutte di prima classe nel campo dello sviluppo del front-end.

Esiste un plug-in che estende il CSS per includere alcune funzionalità non standard che possono davvero aiutare nella progettazione di siti Web. Si chiama EQCSS .

Una delle cose che aggiunge EQCSS è un selettore padre. Funziona su tutti i browser IE8 e versioni successive. Ecco il formato:

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

Quindi qui abbiamo aperto una query elemento su ogni elemento a.active, e per gli stili all'interno di quella query, cose come $parent hanno senso perché c'è un punto di riferimento. Il browser può trovare il genitore, perché è molto simile a parentNode in JavaScript.

Ecco una demo di $prev e un'altra $this demo che funziona in IE8 , nonché uno screenshot nel caso in cui non hai IE8 in giro con cui testare .

EQCSS include anche meta-selettori <=> per l'elemento prima di un elemento selezionato, <= > solo per quegli elementi che corrispondono a una query element e altro ancora.

Tecnicamente non esiste un modo diretto per farlo tuttavia, puoi ordinarlo con jquery o javascript.

Comunque, puoi anche fare qualcosa del genere.

a.active h1 {color:blue;}
a.active p {color: green;}

jQuery

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

Se si desidera ottenere questo risultato utilizzando jQuery, ecco il riferimento per selettore padre jQuery

Il W3C ha escluso un tale selettore a causa dell'enorme impatto sulle prestazioni che avrebbe su un browser.

La risposta breve è NO , non abbiamo un parent selector in questa fase nei CSS, ma se non hai comunque lo scambio di elementi o classi, la seconda opzione sta usando JavaScript, qualcosa del genere:

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 un modo più breve se usi jQuery nella tua applicazione:

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

È ora il 2019 e il l'ultima bozza del CSS Nesting Module ha effettivamente qualcosa come questo. Presentazione di @nest at-rules.

3.2. The Nesting At-Rule: @nest

Mentre l'annidamento diretto sembra bello, è alquanto fragile. Alcuni selettori di annidamento validi, come .foo & Amp ;, non sono consentiti e la modifica del selettore in determinati modi può rendere la regola non valida in modo imprevisto. Inoltre, alcune persone trovano che l'annidamento sia difficile da distinguere visivamente dalle dichiarazioni circostanti.

Per aiutare in tutti questi problemi, questa specifica definisce la regola @nest, che impone meno restrizioni su come nidificare validamente le regole di stile. La sua sintassi è:

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

La regola @nest funziona in modo identico a una regola di stile: inizia con un selettore e contiene dichiarazioni che si applicano agli elementi corrispondenti al selettore. L'unica differenza è che il selettore utilizzato in una regola @nest deve contenere un nido, il che significa che contiene un selettore di nidificazione da qualche parte. Un elenco di selettori contiene nido se tutti i singoli selettori complessi sono contenenti nido.

(copia e incolla dall'URL sopra).

Esempio di selettori validi in base a questa specifica:

.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; }
 */

Sebbene al momento non ci siano selettori principali nei CSS standard, sto lavorando a un progetto (personale) chiamato ax (cioè Sintassi del selettore CSS aumentato / ACSSSS ) che, tra i suoi 7 nuovi selettori, include entrambi:

un selettore genitore immediato < (che abilita la selezione opposta a >)
un qualsiasi selettore di antenati ^ (che abilita la selezione opposta a [SPACE])

ascia è attualmente in una fase di sviluppo BETA relativamente precoce.

Guarda una demo qui:

http://rounin.co.uk/projects/axe/axe2.html

(confronta i due elenchi a sinistra in stile con selettori standard e i due elenchi a destra in stile con selettori ascia)

Ecco un trucco che utilizza 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>

Almeno fino a CSS3 compreso non è possibile selezionare in questo modo. Ma può essere fatto abbastanza facilmente al giorno d'oggi in JS, devi solo aggiungere un po 'di JavaScript vaniglia, nota che il codice è piuttosto breve.

      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>

No, non puoi selezionare il genitore solo in CSS.

Ma siccome sembra che tu abbia già una classe .active, non & # 180; t sarebbe più facile spostare quella classe in li (invece che in a)? In questo modo puoi accedere sia a <=> sia a <=> solo tramite CSS.

È possibile con la e commerciale in SASS:

h3
  font-size: 20px
  margin-bottom: 10px
  .some-parent-selector &
    font-size: 24px
    margin-bottom: 20px

Output CSS:

h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.some-parent-selector h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

Qualche idea?

I CSS 4 saranno fantasiosi se aggiungono alcuni ganci in camminando all'indietro . Fino ad allora è possibile (sebbene non consigliabile) utilizzare checkbox e / o radio input s per rompere il solito il modo in cui le cose sono collegate e attraverso ciò consentono anche ai CSS di operare al di fuori del suo normale ambito ...

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

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

/* &#9660; - 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>

... piuttosto lordo ma con solo CSS e HTML è possibile toccare e ri-toccare qualsiasi cosa tranne body e :root da qualsiasi luogo collegando id e for proprietà di label / : :checked s e [checked] trigger ; probabilmente qualcuno mostrerà come toccarli di nuovo ad un certo punto.

Un ulteriore avvertimento è che solo uno ::after di uno specifico :hover può essere usato, prima <=> / <=> vince uno stato commutato in altro parole ... Ma più etichette possono puntare tutte allo stesso <=>, sebbene ciò renderebbe sia l'HTML che i CSS ancora più grossolani.

... Spero che esista una sorta di soluzione alternativa nativa al livello CSS 2 ...

Non sono sicuro degli altri <=> selettori ma <=> per pre-CSS3, se ricordo correttamente era qualcosa come <=> ed è per questo che potresti trovarlo nel codice sopra, ad esempio ...

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

... ma cose come <=> e <=> non sono affatto sicuro di quale versione CSS siano apparse per la prima volta.

Detto ciò, per favore non usarlo mai in produzione, nemmeno con rabbia, per scherzo, o in altre parole solo perché qualcosa può non significa sempre dovrebbe .

Assumerei un codice JS per farlo. per esempio. in ReactJS quando esegui l'iterazione su un array, aggiungi un'altra classe al componente padre, che indica che contiene i tuoi figli:

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

E poi semplicemente:

.parent {
    color: #000;
}

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

@document

Sebbene tecnicamente non sia un selettore principale, ti permetterà di selezionare l'URL della pagina che è circa " parent " come si arriva. Tieni presente che dovrai sostenere questo (vedi il fondo di questo post per ulteriori istruzioni). Aggiornerò questo post quando questo metodo diventerà praticabile dagli autori web.

Supponiamo che tu voglia modificare background-image l'intestazione di navigazione per ogni pagina. Il tuo HTML dovrebbe generalmente apparire come segue:

<body>

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

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

</body>

L'aggiunta di un attributo id agli elementi head e body non è professionale e non conforme al Web 3.0. Tuttavia selezionando URL non è necessario aggiungere alcun codice HTML in alcun senso:

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

Dato che sei un professionista (lo sei, vero?) sempre testerai il tuo codice locale prima di distribuirlo sul server live. Quindi gli URL statici non funzioneranno su localhost, 127.0.0.1, :1 e così via - per impostazione predefinita . Ciò implica che se hai intenzione di testare e verificare con successo il tuo codice, dovrai eseguire gli script lato server sul tuo CSS. Ciò implica anche che se si consente agli utenti di eseguire CSS sul proprio sito, è necessario assicurarsi che il loro codice CSS non sia in grado di eseguire script sul lato server, sebbene il proprio. La maggior parte delle persone che troverebbero questa parte del post potrebbero non essere sicure su come affrontarlo e tutto dipende da come organizzi il tuo ambiente di lavoro.

Esegui sempre il tuo ambiente locale su RAID 1, 5, 6, 1 + 0 o 0 + 1 (comunemente scambiato con il " inesistente; RAID 10 " e 0 + 1 e 1+ 0 sono molto animali diversi).
Non archiviare il tuo lavoro ( e file personali) sulla stessa unità del tuo sistema operativo; alla fine riformatterai se sei o meno in vena.
Il tuo percorso di root dovrebbe essere simile a questo (su un server WAMP (Windows, Apache, MariaDB e PHP)): D:\Web\Version 3.2\www.example.com\.
In PHP inizierai con il tuo $_SERVER['DOCUMENT_ROOT'] (puoi determinare un sistema operativo Linux tramite if (substr($_SERVER['DOCUMENT_ROOT'],0,1) == '/') {} condizione).
Conservi copie delle versioni precedenti perché devi vedere copie funzionanti nel caso in cui ti fossi dimenticato e rovinato qualcosa, quindi il controllo delle versioni.

I seguenti presuppongono che il tuo server live utilizzi www. ( https://www.example.com/ anziché 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);
}
?>

$a restituirà due parti del tuo URL. L'URL principale della tua pagina iniziale o del tuo sito web sarà / quindi circa / sarebbe about/ una volta che explode o split quando confronti le stringhe. Ciò ti consentirà di raggiungere l'80% circa (sia per i test locali che live) in modo da poter eseguire lo stesso codice in entrambi ambienti e utilizzarlo nel CSS per ricostruire gli URL.

Supporto browser

A partire dal 2019 solo Gecko 61+ supporta questa funzione e solo dietro una bandiera. Ho già sostenuto che diventa utilizzabile dagli autori web. David Baron è l'autore del modulo condizionale delle regole CSS livello 3 . Il ragionamento principale che un vero CSS & Quot; parent selector & Quot; non esiste è a causa dell'impatto sulle prestazioni; questo metodo negherebbe l'impatto sulle prestazioni. Ho anche sostenuto che gli URL relativi dovrebbero essere supportati in presenza dell'elemento HTML base. Se stai leggendo questo o meno dopo l'anno 2019 (ciao a tutti nell'anno 47.632!) prima fai riferimento ai seguenti URL:

La modifica dell'elemento genitore in base all'elemento figlio può verificarsi quando abbiamo un elemento di input all'interno dell'elemento genitore. quando un input ottiene lo stato attivo il suo elemento genitore corrispondente verrà riflesso usando css.

L'esempio seguente ti farà capire usando :focus-within in 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>

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow