Esiste un selettore padre CSS?

Come seleziono l' <li>elemento 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 2 CSS.

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

Qualche idea?

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:

• Selettori Livello 3 Spec
• Selettori CSS 2.1 Spec

Detto questo, il Draft di lavoro di livello 4 dei selettori include una :has()pseudo-classe che fornirà questa capacità. Sarà simile all'implementazione di jQuery .

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

Tuttavia, a partire da maggio 2020, questo non è ancora supportato da nessun browser .

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

Non penso che puoi selezionare il genitore solo in CSS.

Ma siccome sembra che tu abbia già una .activeclasse, sarebbe più semplice spostare quella classe in li(anziché in a). In questo modo è possibile accedere solo a lie atramite CSS.

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

Oppure 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 Internet Explorer.

Come accennato 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");

Sì: :has()

Supporto del browser: nessuno

Non esiste un selettore padre; 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 </body>a quando non sarà necessario determinare se la pagina deve essere rossa o meno.

L'articolo Perché non abbiamo un selettore principale lo spiega in dettaglio.

Non esiste un modo per farlo in CSS 2. È possibile aggiungere la classe a lie fare riferimento a a:

li.active > a {
    property: value;
}

Prova a passare aalla blockvisualizzazione, quindi utilizza lo stile che desideri. L' aelemento riempirà l' lielemento e sarai in grado di modificarne l'aspetto come desideri. Non dimenticare di impostare il liriempimento su 0.

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

Il selettore CSS " General Sibling Combinator " potrebbe forse essere utilizzato per quello che vuoi:

E ~ F {
    property: value;
}

Questo corrisponde a qualsiasi Felemento preceduto da un Eelemento.

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 utilizzando jQuery. Nel mio caso, dovevo trovare il <ul>tag parent per un <span>tag contenuto nel child <li>. jQuery ha il :hasselettore, quindi è possibile identificare un genitore dai figli che contiene:

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

selezionerà l' ulelemento 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)")

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

Supporto del 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>

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

Per 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. Come questo:

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 è possibile modificare lo stile in più tag interni, in base al rollover dell'elemento padre.

Attualmente non esiste un selettore dei genitori e non viene nemmeno discusso in nessuno dei discorsi del W3C. Devi capire come il CSS viene valutato dal browser per capire se ne abbiamo bisogno o no.

Ci sono molte spiegazioni tecniche qui.

Jonathan Snook spiega come viene valutato il CSS .

Chris Coyier parla dei selettori di Parent .

Harry Roberts di nuovo sulla scrittura di efficienti selettori CSS .

Ma Nicole Sullivan ha alcuni fatti interessanti su tendenze positive .

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

Solo un'idea per il 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 del 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 resto del codice

Un altro esempio su come utilizzarlo con input di testo: selezionare il set di campi principale

Ecco un trucco che usa pointer-eventscon 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>

C'è un plugin che estende i 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, Internet Explorer 8 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 $parenthanno senso, perché c'è un punto di riferimento. Il browser può trovare il genitore, perché è molto simile a parentNodeJavaScript.

Ecco una demo$parent e un'altra $parentdemo che funziona in Internet Explorer 8 , nonché uno screenshot nel caso in cui non hai Internet Explorer 8 in giro con cui provare .

EQCSS include anche meta-selettori : $prevper l'elemento prima di un elemento selezionato e $thissolo per quegli elementi che corrispondono a una query di elementi e altro.

È ora il 2019 e l' ultima bozza del modulo di nidificazione CSS ha in realtà qualcosa del genere. Introduzione @nestalle regole.

3.2. La regola della nidificazione: @nest

Mentre l'annidamento diretto sembra bello, è alquanto fragile. Alcuni selettori di annidamento validi, come .foo &, non sono consentiti e la modifica del selettore in determinati modi può rendere la regola non valida in modo imprevisto. Inoltre, alcune persone trovano l'annidamento impegnativo per 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; }
 */

Tecnicamente non esiste un modo diretto per farlo. Tuttavia, puoi risolverlo con jQuery o JavaScript.

Tuttavia, puoi fare anche 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 ciò utilizzando jQuery, ecco il riferimento per il selettore genitore jQuery .

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

La risposta breve è NO ; non abbiamo parent selectora questo punto in CSS, ma se non è necessario scambiare comunque gli elementi o le classi, la seconda opzione sta usando JavaScript. Qualcosa come questo:

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;

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

1. un selettore genitore immediato< (che consente alla selezione opposta di >)
2. un selettore antenato ^ (che consente alla selezione opposta di [SPACE])

ax è 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)

Almeno fino a CSS 3 compreso non è possibile selezionare in questo modo. Ma può essere fatto abbastanza facilmente al giorno d'oggi in JavaScript, devi solo aggiungere un po 'di vaniglia JavaScript, 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>

Qualche idea?

CSS 4 sarà fantasioso se aggiunge alcuni ganci nel camminare all'indietro . Fino ad allora è possibile (anche se non consigliabile) usare checkboxe / oradio input s per interrompere il solito modo in cui le cose sono connesse, e attraverso ciò consentire 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 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;
}

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

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

... piuttosto grossolano , ma con solo CSS e HTML è possibile toccare e ri-toccare qualsiasi cosa tranne il bodye:root da qualsiasi luogo collegando il ide forle proprietà di radio/ checkbox inputs e label trigger ; probabilmente qualcuno mostrerà come ri-toccare quelli ad un certo punto.

Un avvertimento supplementare è che solo uno input di uno specifico può essere idusato, in primo luogo checkbox/ radio vince uno stato alternato in altre parole ... Ma più etichette possono puntare allo stesso input, sebbene ciò renderebbe sia l'HTML che i CSS ancora più grossolani.

---

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

Non sono sicuro degli altri :selettori, ma io :checkedper i pre-CSS 3. Se ricordo bene, è stato qualcosa di simile al [checked]motivo per cui potresti trovarlo nel codice sopra, ad esempio,

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

... ma per cose come ::aftere :hover, non sono affatto sicuro in quale versione CSS siano apparse per la prima volta.

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

No, non puoi selezionare il genitore solo nel CSS.

Ma siccome sembra che tu abbia già una .activeclasse, sarebbe più semplice spostare quella classe in li(anziché in a). In questo modo è possibile accedere solo a lie atramite CSS.

La modifica dell'elemento genitore in base all'elemento figlio può attualmente avvenire solo quando abbiamo un <input>elemento all'interno dell'elemento genitore. Quando un input viene attivato, il suo elemento genitore corrispondente può essere influenzato tramite CSS.

L'esempio seguente ti aiuterà a capire l'utilizzo :focus-withinnei 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>

È possibile con la e commerciale in Sass :

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

Uscita CSS:

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

Assumerei un codice JavaScript per farlo. Ad esempio, in React quando si esegue l'iterazione su un array, aggiungere un'altra classe al componente padre, che indica che contiene i propri figli:

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

E poi semplicemente:

.parent {
    color: #000;
}

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

Non esiste un selettore padre css (e quindi nei preprocessori css) a causa di "I motivi principali per cui il gruppo di lavoro CSS ha precedentemente rifiutato proposte per i selettori padre sono legati alle prestazioni del browser e ai problemi di rendering incrementale".