Ultimo sul selettore genitore CSS

Le informazioni più recenti che riesco a trovare in merito sono il Draft di W3C Selectors Level 4 Editor , ma, per quanto posso vedere, non menziona più il selettore genitore.

So che c’era un sondaggio di Google su questo , ma è finita ora.

Cosa è successo al selettore genitore? Sarà mai introdotto o è stato rimosso?

Il sondaggio è culminato con il selettore sobject (il nome proprio per il cosiddetto “selettore genitore”) che è stato sostituito con il molto più versatile :has() pseudo-class, che è documentata qui (con un nome di ancoraggio interessante, #relational , Mi chiedo se questo si attacchi).

Probabilmente le implementazioni arriveranno solo quando le specifiche di questa funzione saranno più stabili. Attualmente, con tali cambiamenti dirompenti che sostituiscono completamente il selettore sobject con una pseudo-class, non sto facendo affidamento sul fatto che accada presto. Detto questo, è probabile che la pseudo-class :has() rimanga impressa, ma resta da vedere se è ansible implementarla in CSS a causa della sua stessa natura. Consulta questa sezione della stessa bozza per conoscere i profili di implementazione.


La ragione :has() è più versatile perché, con il selettore sobject, non è mai stato chiaro in nessuna bozza se un singolo selettore complesso poteva avere più di un selettore object (poiché un singolo selettore complesso può avere sempre un solo sobject) e / o se pseudo-classi funzionali come :matches() accetta il selettore object. Ma poiché una pseudo-class è un semplice selettore, tu sai che :has() può essere accettato ovunque sia accettata una pseudo-class.

Ad esempio, ciò rende tali selettori come i seguenti abbastanza teoricamente possibili:

 /* * Select any p * that is a sibling of a ul * that has more than one li child. */ ul:has(> li:nth-of-type(2)) ~ p, /* p follows ul */ p:has(~ ul:has(> li:nth-of-type(2))) /* p precedes ul */ 

Considerando che, utilizzando il selettore sobject, ciò sarebbe ansible solo se :matches() accettato il selettore sobject, che non è mai stato dichiarato direttamente nelle specifiche:

 ul:matches(! > li:nth-of-type(2)) ~ p, /* p follows ul */ !p ~ ul:matches(! > li:nth-of-type(2)) /* p precedes ul */ 

Puoi anche vedere qui perché non mi piace il nome “selettore genitore” per entrambe le forms del selettore – può essere usato per molto altro ancora .

Secondo Wikipedia :

I selezionatori non sono in grado di salire

Il CSS attualmente non offre alcun modo per selezionare un genitore o un antenato di un elemento che soddisfi determinati criteri. Selettore CSS Livello 4, che è ancora in stato Draft di lavoro, propone un tale selettore, ma solo come parte del profilo di selezione “completo”, non il profilo “veloce” utilizzato nello stile CSS dinamico. Uno schema di selezione più avanzato (come XPath) consentirebbe fogli di stile più sofisticati. I principali motivi per cui CSS Working Group ha precedentemente rifiutato le proposte per i selettori padre sono relativi alle prestazioni del browser e ai problemi di rendering incrementale.

Per quanto riguarda il momento in cui verrà introdotto il livello 4 dei selettori, anche se … beh, dipende da quando i principali browser implementano il supporto per questo. E quando un numero sufficiente di utenti esegue l’ aggiornamento a quelle versioni del browser.

Modifica: vedere questa risposta per ulteriori informazioni.

Beh, in css non esiste un selettore genitore. Ma a causa di un piccolo trucco posso usare .childinternal : parent {background-color: yellow} nel mio file CSS locale senza andare in profondità in jquery o javascript.

Il trucco è un po ‘sporco perché altera lo stile dell’elemento genitore (che non è quello che fa il CSS) e non è una vera pseudo-class. Ma nel tuo foglio di stile CSS puoi usarlo come era.

Ci sono due modi di implementare (entrambi mostrati) Il primo è una pseudo class: questo può essere fatto solo su un foglio di stile locale a causa del “non consentire cattivi psuedos” di alcuni browser.

L’altro è uno che viene eseguito su tutti i fogli di stile che verificano un ‘riferimento alla class GetParent’.

Per me funziona. Di solito prendo il primo, che è il più veloce.

Soluzione:

 $(function() { //First possibility when using local css file (=faster)// $.when($.get("your local filename.css")).done(function(response) { var spl = response.split(":parent"); if (spl.length > 1) { var clas = $.trim((spl[0].split("}")[spl[0].split("}").length - 1]).replace(String.fromCharCode(10), '').replace(String.fromCharCode(13), '')); var cs = $.trim((spl[1].split("}")[0].split("{")[1]).replace(String.fromCharCode(10), '').replace(String.fromCharCode(13), '')); var eClas = $(clas).parent().attr('style'); eClas = eClas == undefined ? '' : (eClas + '').toString; $(clas).parent().attr('style', eClas + ';' + cs); } }); }); // second possibility looping all used css files for (var s = document.styleSheets.length - 1; s >= 0; s--) { var cssRules = document.styleSheets[s].cssRules || document.styleSheets[s].rules || []; // IE support for (var c = 0; c < cssRules.length; c++) { if (cssRules[c].selectorText) { if (cssRules[c].selectorText.indexOf('.GetParent') > -1) { var spl = cssRules[c].cssText.split(".GetParent"); if (spl.length > 1) { var clas = $.trim((spl[0].split("}")[spl[0].split("}").length - 1]).replace(String.fromCharCode(10), '').replace(String.fromCharCode(13), '')); var cs = $.trim((spl[1].split("}")[0].split("{")[1]).replace(String.fromCharCode(10), '').replace(String.fromCharCode(13), '')); var eClas = $(clas).parent().attr('style'); eClas = eClas == undefined ? '' : (eClas + '').toString; $(clas).parent().attr('style', eClas + ';' + cs); } } } } } 
 .childinternal :parent { background-color: yellow } .childexternal .GetParent { Background-color: green } 
  
Not affected Main parent

Not affected parent (no parent selector)

local css file used (:parent selector) Only works on local files so not possible to show in this snippet

external css file used (.GetParent class selector)