C’è un selettore genitore CSS?

Come seleziono l’elemento

  • che è un elemento principale 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 soluzione alternativa al livello 2 di CSS.

    Il menu che sto cercando di creare è stato emesso da un CMS, quindi non posso spostare l’elemento attivo nell’elemento

  • … (a meno che non tocchi il modulo di creazione dei menu che preferirei non fare).

    Qualche idea?

    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:

    • Selettori Livello 3 Spec
    • Selettori CSS 2.1 Spec

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


    La bozza di lavoro Selectors Level 4 include una pseudo-class :has() che funziona come l’ implementazione jQuery . A partire dal 2018, questo non è ancora supportato da alcun browser .

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

     li:has(> a.active) { /* styles to apply to the li tag */ } 
  • Non penso che tu possa selezionare il genitore solo in css.

    Ma poiché sembra che tu abbia già una class .active , non sarebbe più facile spostare quella class sul li (invece che sulla a )? In questo modo è ansible accedere sia a li sia a solo via CSS.

    Puoi usare questo script .

     *! > 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:

     
    Your name sir

    puoi selezionare span.help quando l’ input è attivo e mostrarlo:

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

    Come accennato da un paio di altri, non c’è un modo per disegnare 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 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 class 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 a per determinare se la pagina debba essere rossa o meno.

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

    non c’è un modo per farlo in css2. è ansible aggiungere la class al file Li e fare riferimento a a

     li.active > a { property: value; } 

    Il selettore CSS ” General Sibling Combinator ” potrebbe forse essere usato per quello che vuoi:

     E ~ F { property: value; } 

    Questo corrisponde a qualsiasi elemento F preceduto da un elemento E

    Prova a passare a a schermata di block , quindi utilizza qualsiasi stile desideri. a elemento riempie l’elemento li e sarai in grado di modificare l’aspetto che vuoi. Non dimenticare di impostare il padding li su 0.

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

    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.

    So che l’OP stava cercando una soluzione CSS ma è semplice ottenere usando jQuery. Nel mio caso avevo bisogno di trovare il

      tag principale per un tag contenuto nel figlio

    • . jQuery ha il selettore :has quindi è ansible 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 testata):

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

      Questo è l’aspetto più discusso della specifica del Livello 4 di Selectors . Con questo selettore sarà ansible modellare un elemento in base al suo bambino utilizzando un punto esclamativo dopo il selettore indicato (!).

      Per esempio:

       body! a:hover{ background: red; } 

      imposterà un colore di sfondo rosso se l’utente sorvola qualsiasi ancora.

      Ma dobbiamo aspettare l’implementazione dei browser 🙁

      Potresti provare a utilizzare il collegamento ipertestuale come genitore e 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 è ansible modificare lo stile in più tag interni, in base al rollover dell’elemento padre.

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

      C’è un sacco di spiegazioni tecniche qui.

      Jonathan Snook spiega come viene valutato il CSS .

      Chris Coyier sui discorsi del selezionatore dei genitori .

      Harry Roberts di nuovo sulla scrittura di selettori CSS efficienti .

      Ma Nicole Sullivan ha alcuni fatti interessanti sulle tendenze positive .

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

      Qualcuno ha suggerito qualcosa di simile? Solo un’idea per il menu orizzontale …

      parte dell’HTML

        

      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 il resto del codice

      Un altro esempio su come usarlo con gli input di testo: selezionare il fieldset principale

      si :has()

      supporto browser: nessuno

      Lo pseudo elemento :focus-within consente a un genitore di essere selezionato se un discendente ha il focus.

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

      Supporto per browser per focus-inside

      tabindex

      Esempio

       .click { cursor: pointer; } .color:focus-within .change { color: red; } .color:focus-within p { outline: 0; } 
       

      I will change color

      Click me

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

      Comunque, puoi fare qualcosa come questo.

       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

      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 EQCSS aggiunge è un selettore genitore. Funziona su tutti i browser IE8 e versioni successive. Ecco il formato:

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

      Quindi qui abbiamo aperto una query di elementi 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 $parent e un’altra demo $parent che funziona in IE8 , oltre a uno screenshot nel caso in cui non ci sia IE8 in giro per testare .

      EQCSS include anche meta-selettori $prev per l’elemento prima di un elemento selezionato, $this solo per quegli elementi che corrispondono a una query di elementi e altro ancora.

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

      Risposta breve è NO , non abbiamo un parent selector in questa fase in CSS, ma se non hai comunque lo scambio di elementi o classi, la seconda opzione utilizza 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; 

      Anche se al momento non esiste un selettore genitore nel CSS standard, sto lavorando a un progetto (personale) chiamato ax (cioè Sintassi del selettore CSS / ACSSSS aumentata ) che, tra i suoi 7 nuovi selettori, include entrambi:

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

      ax è attualmente in uno stadio di sviluppo BETA relativamente precoce.

      Guarda una demo qui:

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

      (confronta i due elenchi a sinistra con i selettori standard e i due elenchi a destra con i selettori ax)

      No, non puoi selezionare il genitore solo in css.

      Ma poiché sembra che tu abbia già una class .active , non sarebbe più facile spostare quella class sul li (anziché sulla a )? In questo modo è ansible accedere sia a li sia a solo via CSS.

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

      Almeno fino a includere CSS3 non puoi selezionare in questo modo. Ma può essere fatto abbastanza facilmente al giorno d’oggi in JS, è sufficiente aggiungere un po ‘di JavaScript vaniglia, notare 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)}; }); 
        
      Peter
      Philip
       a ~ li { background: red } 

      C’è un nuovo selettore aggiunto in css3, quindi se html ha questo aspetto:

        

      In effetti, sei in grado di influire sul genitore dell’elemento “a”, che è “li”

      Ecco un trucco usando gli pointer-events con hover :

       < !doctype html>        

      Nei CSS, possiamo eseguire una cascata verso le proprietà lungo la gerarchia, ma non nella direzione opposta. Per modificare lo stile genitore sull’evento figlio, probabilmente usa jQuery.

       $el.closest('.parent').css('prop','value');