Seleziona l'elemento in base a più classi


360

Ho una regola di stile che voglio applicare a un tag quando ha due classi. Esiste un modo per eseguire ciò senza JavaScript? In altre parole:

<li class='left ui-class-selector'>

Voglio applicare la mia regola di stile solo se lisono state applicate entrambe .lefte le .ui-class-selectorclassi.


Risposte:


595

Intendi due lezioni? "Incatena" i selettori (senza spazi tra loro):

.class1.class2 {
    /* style here */
}

Questo seleziona tutti gli elementi class1che hanno anche class2.

Nel tuo caso:

li.left.ui-class-selector {

}

Documentazione ufficiale: selettori di classe CSS2 .


Come Akamike evidenzia un problema con questo metodo in Internet Explorer 6, potresti voler leggere questo: Usa le doppie classi in IE6 CSS?


6
Si noti che a IE6 non piacciono questi, poiché non legge la catena di classi. Guarderà solo l'ultima classe della catena.
— Akamike

16
non è :) Tutti i principali siti Web sono stati eliminati, stanno cadendo o stanno pianificando di perdere il supporto per IE6 nel prossimo futuro. Fai lo stesso!
— Thomas Bonini,

@Andreas Bonini: Sì, lo so. Ad essere sincero, non mi interessa già da tempo IE6. (Ho eliminato il mio commento precedente perché ho trovato l'altra domanda che affronta questo problema.)
— Felix Kling

Sì, non puoi usarli affatto in IE6, prendi solo percorsi più lunghi per modellare i tuoi elementi. Ad esempio, assegnando uno stile a ciascuna classe separatamente e utilizzando la specificità CSS appropriata per eseguire l'override il meglio possibile.
— Akamike

2
Ricordo con affetto di aver ballato sulla tomba di IE6. Non ho nemmeno dovuto supportare IE10 quest'anno, e abbandonare IE del tutto è all'orizzonte. Adoro il futuro. ☺
— Michael Scheper,

22

I selettori di catena non si limitano solo alle classi, puoi farlo sia per le classi che per gli ID.

Classi

.classA.classB {
/*style here*/
}

ID della classe

.classA#idB {
/*style here*/
}

L'ho fatto

#idA#idB {
/*style here*/
}

Tutti i buoni browser attuali supportano questo tranne IE 6, che seleziona in base all'ultimo selettore nell'elenco. Quindi ".classA.classB" selezionerà in base solo a ".classB".

Per il tuo caso

li.left.ui-class-selector {
/*style here*/
}

o

.left.ui-class-selector {
/*style here*/
}

9
Id & Id è un selettore concettualmente strano.
— Félix Gagnon-Grenier,

0

Puoi usare queste soluzioni:

Le regole CSS si applicano a tutti i tag che hanno le seguenti due classi:

.left.ui-class-selector {
    /*style here*/
}

Le regole CSS si applicano a tutti i tag che hanno <li>con le seguenti due classi:

li.left.ui-class-selector {
   /*style here*/
}

soluzione jQuery:

$("li.left.ui-class-selector").css("color", "red");

Soluzione Javascript:

document.querySelector("li.left.ui-class-selector").style.color = "red";
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.