1.1.2 Как сменить последовательность классов в стиле?

Редактируя и настраивая стандартный стиль появился вопрос:

При изменении цвета background'a класса @secondaryContent (Второстепенное содержимое) он изменяется не только в секциях sidebar'а, но еще и во многих местах. Перекрывая при этом класс @blockLinksList (Меню: контейнер ссылок) - для него задан свой цвет.

Структура такая:

HTML:

<ol class="secondaryContent blockLinksList">

Пробовал менять классы местами редактируя шаблон:

HTML:

<ol class="blockLinksList secondaryContent">

но ничего не меняется.

Помогает только удаление этого класса, в итоге код приобретает такой вид:

HTML:

<ol class="blockLinksList">

Хочу чтобы класс secondaryContent остался, а для контейнера ссылок отображался свой цвет через класс blockLinksList (был выше что ли, или secondaryContent как нибудь скрывать в этом месте, когда задан цвет для blockLinksList), без редактирования шаблона. Как это реализовать?

 

Порядок указания классов никак не влияет на последовательность их применения. Применение идет, исходя из очередности описания в CSS. Т.е., если какой-то класс для элемента указан в CSS раньше, то будет применяться он, перекрывая все остальные нижеследующие определения. Чтобы применить какие-то настройки, которые располагаются ниже, требуется добавить !important после значения свойства. Это помогает не всегда (может быть несколько таких описаний, например, что влечет за собой применение первого !important).
Без правки шаблонов обойтись в таком случае довольно сложно, а то и невозможно. Как вариант, можно использовать EXTRA.CSS, в котором описать нужные настройки для id элемента, а не его класса. Дело в том, что применение CSS для id приоритетнее применения CSS для class. Но, как можете заметить, далеко не всегда указан id элемента. Тогда нужно в шаблоне добавить его, а в EXTRA.CSS добавить блок для этого id. В любом случае обратите внимание, что EXTRA.CSS подключается позже, чем основные CSS. Поэтому перекрытие в EXTRA.CSS делается часто как раз с применением !important. Либо там же описывается блок для id, который либо уже есть, либо приходится указывать его в шаблоне.
Ну и всегда работающий вариант - это прямо в шаблоне описать style для элемента. Тогда все, что описано внешними CSS идет лесом, а применяются в первую очередь те свойства, которые указаны в style элемента.

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

Я не специалист в этом. Может быть есть и другие варианты.

 

Немного дополню то что сказано выше. Про очерёдность сказано почти точно. Используется всегда последний указаный селектор, но если какой-то селектор содержит больше уточнений то использован будет именно он.
К примеру, если задать:
.myClass .element {color: red;}
.element {color: green;}

То использовано будет первое значение, так как оно более точное.
!important использовать не советую, лучше навешивать к селекторам html, body. Если конечно какое-то свойство использовать совсем недопустимо то да, обязательно надо указать !important.

 

Раз уж заговорили об этом, рекомендую ознакомиться со статьей на Хабре. Разом снимает большинство вопросов о приоритетах CSS-правил.