Wybierz element na podstawie wielu klas


360

Mam regułę stylu, którą chcę zastosować do tagu, gdy ma on dwie klasy. Czy jest jakiś sposób na wykonanie tego bez JavaScript? Innymi słowy:

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

Chcę zastosować moją regułę stylu tylko wtedy, gdy lizastosowano obie klasy .lefti .ui-class-selectorklasy.


Odpowiedzi:


595

Masz na myśli dwie klasy? „Połącz” selektory (bez spacji między nimi):

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

To wybiera wszystkie elementy, class1które również mają class2.

W Twoim przypadku:

li.left.ui-class-selector {

}

Oficjalna dokumentacja: Selektory klas CSS2 .


Jak akamike wskazuje na problem z tą metodą w Internet Explorerze 6, możesz przeczytać to: Używać podwójnych klas w CSS IE6?


6
Należy pamiętać, że IE6 ich nie lubi, ponieważ nie odczytuje łańcucha klas. Spojrzy tylko na ostatnią klasę w łańcuchu.
akamike

16
to nie jest :) Wszystkie główne strony internetowe spadły, upuszczają lub planują w najbliższej przyszłości wsparcie dla IE6 .. Zrób to samo!
Thomas Bonini

@Andreas Bonini: Tak, wiem. Szczerze mówiąc już od dawna nie dbam o IE6. (Usunąłem mój poprzedni komentarz, ponieważ znalazłem inne pytanie, które dotyczy tego problemu.)
Felix Kling

Tak, w ogóle nie można ich używać w IE6, wystarczy stylizować elementy dłuższymi trasami. Na przykład, stylizuj każdą klasę osobno i używając odpowiedniej specyfiki CSS, aby zastąpić jak najlepiej.
akamike

2
Czule pamiętam taniec na grobie IE6. W tym roku nawet nie musiałem wspierać IE10, a porzucenie IE jest już na horyzoncie. Kocham przyszłość. ☺
Michael Scheper

22

Selektory łańcucha nie ograniczają się tylko do klas, możesz to zrobić zarówno dla klas, jak i identyfikatorów.

Klasy

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

Identyfikator klasy

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

Zrobiłem

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

Wszystkie dobre obecne przeglądarki obsługują to, z wyjątkiem IE 6, wybiera na podstawie ostatniego selektora na liście. Zatem „.classA.classB” wybierze na podstawie po prostu „.classB”.

Do twojej sprawy

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

lub

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

9
Id & Id to dziwny koncepcyjnie selektor.
Félix Gagnon-Grenier,

0

Możesz użyć tych rozwiązań:

Reguły CSS mają zastosowanie do wszystkich tagów, które mają następujące dwie klasy:

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

Reguły CSS mają zastosowanie do wszystkich tagów, które mają <li>następujące dwie klasy:

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

Rozwiązanie jQuery:

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

Rozwiązanie Javascript:

document.querySelector("li.left.ui-class-selector").style.color = "red";
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.