Czy możesz kierować na element za pomocą CSS tylko wtedy, gdy obecne są 2 klasy?

85

Jak zapewne już wiesz, możesz mieć wiele klas elementów oddzielonych spacją.

Przykład

<div class="content main"></div>

I CSS, które można kierować divz albo .contentalbo .main. Czy istnieje sposób na skierowanie go wtedy i tylko wtedy, gdy obie klasy są obecne?

Przykład

<div class="content main">I want this div</div>
<div class="content">I don't care about this one</div>
<div class="main">I don't want this</div>

Którego selektora CSS użyłbym, aby uzyskać divtylko pierwszy (zakładając, że nie mogę użyć .content:first-childlub podobnego)?

css css-selectors Alex
źródło

Odpowiedzi:

135

Tak, po prostu złączyć je: .content.main. Zobacz selektor klas CSS .

Należy jednak pamiętać, że Internet Explorer do wersji 6 nie obsługuje wielu selektorów klas i po prostu honoruje ostatnią nazwę klasy.

Gumbo
źródło
O ile to jest „do”, a nie „włącznie” IE6 :)
alex
Nie, IE6 nie obsługuje poprawnie połączonych selektorów CSS. Ta reguła będzie miała zastosowanie do wszystkich elementów z atrybutem class = "main", niezależnie od tego, czy są to również elementy class = "content"
Gareth
Ilustracja IE6 w porównaniu z innymi przeglądarkami dla każdego, kogo to obchodzi: stackoverflow.com/questions/3772290/ ...
BoltClock
11

Ze względu na to (nie polecam ci tego robić), jest inny sposób:

.content[class~="main"] {}

Lub:

.main[class~="content"] {}

Źródła: http://www.w3.org/TR/CSS2/selector.html

E [foo ~ = "warning"] Pasuje do dowolnego elementu E, którego wartością atrybutu „foo” jest lista wartości oddzielonych spacjami , z których jedna jest dokładnie równa „warning”

Demo: http://jsfiddle.net/eXrSg/

Dlaczego jest to faktycznie przydatne (przynajmniej dla IE6):

Ponieważ IE6 nie obsługuje wielu klas, nie możemy ich używać .content.main, ale są pewne biblioteki javascript, takie jak IE-7.js, które umożliwiają selektor atrybutów, ale nadal wydają się nie działać, jeśli chodzi o wiele klas. Przetestowałem to obejście w IE6 z javascriptem włączającym selektor atrybutów i jest brzydkie, ale działa.

Nie znalazłem jeszcze skryptu, który sprawia, że ​​IE6 obsługuje wiele selektorów klas, ale znalazłem wiele, które umożliwiają selektory atrybutów. Jeśli ktoś zna taki, który działa , daj mi znać w komentarzach, abym pozbył się tego obejścia.

Wesley Murch
źródło