Sto cercando di creare un selettore che selezionerà tutti gli elementi se hanno un elemento figlio specifico. Ad esempio, seleziona tutto
Possibile?
È ansible selezionare un elemento se contiene un elemento figlio specifico?
Purtroppo non ancora.
Le specifiche del selettore CSS2 e CSS3 non consentono alcun tipo di selezione genitore.
Questo è un disclaimer sulla precisione di questo post da questo punto in poi. I selettori dei genitori in CSS sono stati discussi per molti anni. Non essendo stato trovato alcun consenso, i cambiamenti continuano a verificarsi. Cercherò di mantenere questa risposta aggiornata, tuttavia sappi che potrebbero esserci inesattezze dovute a cambiamenti nelle specifiche .
Un vecchio “Working Draft di livello 4 Selectors” descriveva una caratteristica che era la capacità di specificare il “sobject” di un selettore . Questa funzione è stata eliminata e non sarà disponibile per le implementazioni CSS .
L’object sarebbe stato l’elemento nella catena di selettori a cui sarebbero stati applicati degli stili.
Esempio HTML
lorem ipsum dolor sit amet
consecteture edipsing elit
Questo selettore avrebbe stile l’elemento span
p span { color: red; }
Questo selettore avrebbe stile l’elemento p
!p span { color: red; }
Una versione più recente di “Editor di livello 4 per i selettori” include “La pseudo-class relazionale :has() ”
:has() consentirebbe a un autore di selezionare un elemento in base al suo contenuto. La mia comprensione è che è stato scelto per fornire compatibilità con l’abitudine di jQuery :has() pseudo-selettore *.
In ogni caso, continuando l’esempio dall’alto, per selezionare l’elemento p che contiene uno span si potrebbe usare:
p:has(span) { color: red; }
* Questo mi fa chiedere se jQuery abbia implementato i soggetti selettori se i soggetti sarebbero rimasti nelle specifiche.
Per completezza, volevo sottolineare che nella specifica Selectors 4 (attualmente in proposta), ciò sarà ansible. In particolare, otterremo Selettori sobject , che verranno utilizzati nel seguente formato:
!div > span { /* style here */
Il ! prima che il selettore div indichi che è l’elemento da designare, piuttosto che lo span . Sfortunatamente, nessun browser moderno (al momento di questa pubblicazione) lo ha implementato come parte del supporto CSS. Vi è, tuttavia, il supporto tramite una libreria JavaScript chiamata Sel , se si desidera approfondire ulteriormente il percorso di esplorazione.
Sono d’accordo che non è ansible in generale.
L’unica cosa che può fare il CSS3 (che ha aiutato nel mio caso) è selezionare elementi che non hanno figli:
table td:empty { background-color: white; }
O avere figli (incluso il testo):
table td:not(:empty) { background-color: white; }