CSS как изменить приоритет воздействия классов?

Question

[av_tyschenko]

У меня вопрос к продвинутым пользователям)

<div class="color-scheme-1">
  <div class="color-scheme-2">
     <p>Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit. Aecenas Ac Augue At Erat Hendrerit Dictum. Praesent Porta, Purus Eget Sagittis.</p>
  </div>
</div>

.color-scheme-2 p {
  color: blue;   
}
.color-scheme-1 p {
  color: red;   
}

jsfiddle.net/17g60t0q - для наглядности

Нужно как то нейтрализовать класс color-scheme-1, что бы класс color-scheme-2 красил в голубой.

Пример очень очень упрощен, поэтому простого ' > ' в моем случае не поможет, пример написал для упрощения понимания.

Если есть какой то способ решить вопрос через JQ или добавления еще какого то класса для приоритета, любые решения буду рассматривать.

Answer 1

[dm_ober]

Поменять местами объявление стилей, применится последний
.color-scheme-1 p {}
.color-scheme-2 p {}

Comments

[av_tyschenko]

В том и суть, что у меня таких, 16 штук, и используют их постоянно в хаотичном порядке.

Answer 2

[everliving]

.color-scheme-1 .color-scheme-2 p {
  color: blue;   
}

Читай про Каскады

Comments

[av_tyschenko]

Такой вариант не подойдет, у меня их 16 штук и я не могу миксовать их) мне нужно стороннее воздействие

Answer 3

[Дмитрий]

.color-scheme-2 p {
  color: blue !important;   
}
.color-scheme-1 p {
  color: red;   
}

Либо можно прямо в inline стиль к параграфу цвет вписать, если это "точечный удар".
Но некоторые сочтут это грязными приемчиками.

Comments

[av_tyschenko]

Пример очень очень упрощен, поэтому простого ' > ' в моем случае не поможет, пример написал для упрощения понимания.

PS : и important тоже)

[Дмитрий]

Какой вопрос, такой ответ. Кейс опиши более детально.