CSS: styl zastosowany do kombinacji klas?

Question

Nie jestem pewien, czy jest to możliwe, ale czy jest tam składnia do zastosowania w CSS, gdy chcesz stylować element na podstawie kombinacji klas zastosowanych do niego?

Rozumiem, że mogę sprawdzić element z jQuery lub czymś i zmienić jego styl w oparciu o klasy, które ma, ale czy jest to czysty sposób CSS, aby to zrobić?

Na przykład, jeśli mam klasy odważne i zielonej:

.bold_green { color:green; font-weight:bold; } 

I klasy odważne i niebieskim:

.bold_blue { color:blue; font-weight:bold. } 

teraz powiedzieć używam jQuery do dodawania i usuwania klasy dynamicznie i chcą dowolnego elementu, który ma obie klasy, aby włączyć kursywą różowy.

Coś jak:

.bold_green AND .bold_blue { color:pink; font-style:italic; } 

Lub, jeśli chcę projektować element, który ma aclass i jest potomkiem innego elementu, który ma inną klasę?

Coś jak:

.bold_green HAS_CHILD .bold_blue { color:black; background-color:yellow; } 

Dzięki!

Edit

Dzięki za wszystkie odpowiedzi. Są to w zasadzie to, o czym pomyślałem (traktując klasy jako zwykłe selektory), ale nie wydają się działać dla mnie. Będę musiał sprawdzić mój kod i upewnić się, że nie są przesłonięte jakoś ...

Answer 1

$('.bold_green.bold_blue').addClass('something-else'); 

Albo w CSS:

.bold_green.bold_blue { color: pink; } 

Wskazówka nie ma miejsca pomiędzy selektorów.

Answer 2

Nie trzeba nic specjalnego, po prostu

.bold_green.bold_blue { color:pink; font-style:italic; } 

Answer 3

Paul i Voyager są prawidłowe dla przypadku wielu klas.

Dla „ma dziecko” wypadku należałoby użyć:

.bold_green .bold_blue { ... } /* note the ' ' (called the descendant selector) */ 

Który styl żadnych bold_blue elementów wewnątrz elementu bold_green.

Lub jeśli chciał bezpośredni dziecko:

.bold_green > .bold_blue { ... } /* this child selector does not work in IE6 */ 

Który styl tylko bold_blue elementy, które mają bezpośredniego rodzica bold_green.

Answer 4

w Visual Studio 2013 ustawienie CSS jest stosowany do wielu klas przez „przecinek” w następujący sposób:

.bold_green, .bold_blue { color:pink; font-style:italic; }