Domanda C'è un selettore genitore CSS?


Come seleziono il <li> elemento che è un genitore diretto dell'elemento di ancoraggio?

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 soluzione alternativa al livello 2 di CSS.

Il menu che sto cercando di creare viene emesso da un CMS, quindi non posso spostare l'elemento attivo su <li> elemento ... (a meno che non tocchi il modulo di creazione del menu che preferirei non fare).

Qualche idea?


2507
2018-06-18 19:59


origine


risposte:


Al momento non esiste alcun modo per 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.


Il Selezionatori Livello 4 Bozza di lavoro include a :has() pseudo-classe che funziona allo stesso modo di implementazione jQuery. A partire dal 2018, questo non è ancora supportato da nessun browser.

utilizzando :has() la domanda originale potrebbe essere risolta con questo:

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

2007
2018-06-18 20:16



Non penso che tu possa selezionare il genitore solo in css.

Ma come sembri già avere un .active classe, non sarebbe più facile spostare quella classe in li (invece del a)? In questo modo è possibile accedere a entrambi li e il a solo via CSS.


119
2018-06-18 20:08



Puoi usare questo copione.

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

Questo selezionerà qualsiasi genitore di un input di testo. Ma aspetta, c'è ancora molto altro. 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 il input è attivo e mostralo:

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

Ci sono molte più funzionalità; basta controllare la documentazione del plugin.

A proposito, funziona in IE.


99
2017-08-13 10:13



Come accennato da un paio di altri, non c'è un modo per disegnare i genitori di un elemento usando solo CSS, ma con i seguenti lavori jQuery:

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

74
2017-12-14 14:51



Non esiste un selettore genitore; proprio come non esiste un precedente selettore fratello. Una buona ragione per non avere questi selettori è perché il browser deve attraversare tutti i figli di un elemento per determinare se una classe debba essere applicata o meno. 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 al </body> per determinare se la pagina deve essere rossa o meno.

Questo articolo Perché non abbiamo un selettore genitore lo spiega in dettaglio.


44
2018-01-21 08:43



non c'è un modo per farlo in css2. è possibile aggiungere la classe al file Li e fare riferimento a a

li.active > a {
    property: value;
}

39
2018-06-18 20:06



Il selettore CSS "General Sibling Combinator"Potrebbe forse essere usato per quello che vuoi:

E ~ F {
    property: value;
}

Questo corrisponde a qualsiasi F elemento che è preceduto da un E elemento.


26
2018-06-30 14:00



Prova a cambiare a a block visualizzare e quindi utilizzare qualsiasi stile desiderato. al'elemento si riempirà li elemento e sarai in grado di modificare l'aspetto che desideri. Non dimenticare di impostare li riempimento a 0.

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

24
2017-11-23 09:03



Non in CSS 2 per quanto ne so. Il 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.


19
2018-06-18 20:09