Selettore CSS: elemento con un determinato figlio

Sto cercando di creare un selettore che selezionerà tutti gli elementi se hanno un elemento figlio specifico. Ad esempio, seleziona tutto

con un child .

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.


Una nota sulle modifiche alle specifiche

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