CSS: Стиль применяется к сочетанию классов?

Я не уверен, что это возможно, но есть ли синтаксис для использования в CSS, если вы хотите стилизовать элемент на основе комбинации применяемых к нему классов?

Я понимаю, что я могу проверить элемент с помощью jQuery или что-то подобное и изменить его стиль на основе классов, которые он имеет, но есть ли чистый способ CSS для этого?

Например, если у меня есть класс для жирного и зеленого:

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

И класс для жирного и синего:

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

Теперь, скажем, я использую jQuery для динамического добавления и удаления классов и хочу, чтобы любой элемент, у которого оба класса были выделены курсивом, розовым.

Что-то вроде:

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

Или, если я хочу создать элемент, который имеет aclass, и является потомком другого элемента, который имеет другой класс?

Что-то вроде:

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

Спасибо!

Edit

Спасибо за все ответы. Это в значительной степени то, что я думал (просто рассматривая классы как обычные селекторы), но они, похоже, не работают для меня. Мне нужно будет проверить свой код и убедиться, что они не переопределены каким-то образом...

Ответ 1

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

Или в CSS:

.bold_green.bold_blue { color: pink; }

Обратите внимание, что между селекторами нет места.

Ответ 2

Вам ничего не нужно, просто

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

Ответ 3

Paul и Voyager верны для случая с несколькими классами.

Для случая "HAS CHILD" вы должны использовать:

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

Будет создан стиль bold_blue элементов внутри элемента bold_green.

Или если вы хотите DIRECT child:

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

Будет создан только стиль bold_blue, который имеет непосредственный родительский bold_green.

Ответ 4

В visual studio 2013 настройка CSS применяется к нескольким классам с помощью "Запястья" следующим образом:

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