Seleziona elemento in base alla classe figlio

Question

C'è un modo in CSS per selezionare un elemento che ha un sottoelemento con una determinata classe?

Desidero applicare uno stile a un elenco <ul> con <li> con una classe particolare.

Answer 1

Questo non è possibile con css, dal momento che stai lavorando contro la cascata selezionando un antenato basato su un discendente.

Il meglio che posso offrire e suggerire è un approccio jQuery:

$(document).ready(
    function() { 
    $('.givenClassName').parent().addClass('something'); 
    } 
); 

questo trova l'elemento con il givenClassName e poi seleziona suo elemento genitore e aggiunge la classe something a quell'elemento.

@Blaenk suggerisce un approccio alternativo, che è più versatile (il suo approccio non richiede che l'elemento antenato sia il genitore dell'elemento che si sta selezionando).

Ovviamente altre librerie JS, e JS tutto da solo, possono ottenere lo stesso effetto, anche se non posso offrire un consiglio particolare, dato che sto solo familiarizzando con JS e principalmente con jQuery (perché sì, io am vergognarsi di me stesso ...).

Answer 2

ul li { 
    /* styles */ 
} 

È questo che stai chiedendo?

Answer 3

No. CSS Cascade non consente questo tipo di selettore.

La soluzione migliore in questo caso sarebbe quella di modificare il DOM con JavaScript o di modificare il codice HTML risultante per aggiungere classi ai tag ul.

Answer 4

Per quanto ne so, questo purtroppo non è possibile con i CSS.

Se è possibile utilizzare Javascript, jQuery ha un buon modo per farlo utilizzando il metodo closest(). Il numero documentation elenca addirittura un esempio molto simile al tuo: selezionando un file che ha un codice di una particolare classe.

$("li.some-class").closest("ul"); 

Perdonami se questo non è il modo migliore per farlo in jQuery. In realtà sono nuovo di jQuery e questo è uno dei metodi che ho imparato finora e mi è sembrato appropriato.