Отдельный стиль для элемента css?

Question

[unlik]

Имеется селектор состоящий из трех классов, например .header .contacts .phone

В данном селекторе задана ширина блока. Данная ширина блока используется на всех страницах.
Сейчас пытаюсь создать шаблон для новой страницы. Там нужен точно такой же блок но большей ширины.

Как изменить селектор? Чтобы не создавать все новые классы для нового шаблона.

Answer 1

[Андрей Б.]

К примеру так

.header .contacts .phone--big
или
.header .contacts .phone--large

Правда тут придется просто добавить этот класс через запятую к старому чтобы старые стили применить, а ширину уже отдельно написать.
По хорошему лучше делать отдельным классом, типо class="phone phone--big"
Если есть возможность убрать из каскада .contacts, уберите везде.

Comments

[unlik]

Спасибо. Здесь разобрался. Но столкнулся с похожей проблемой. Например для .header .contact задан h2. На всех страницах он такой. Но на новой мне нужен другой размер шрифта. Пробовал и через и обвертывать в div. Все равно для h2 отображаются стили от .header .contact

[unlik]

Точнее даже для .header задан h2 и внутри него не могу задать h2 c другим стилем.

Answer 2

[Юлия Старченко]

использовать css-сигнатуры (т.е. задать в конкретном шаблоне класс только тегу body, а все остальные классы менять не придется).

А вообще лучше не использовать такие селекторы, старайтесь делать классы более уникальными, чтобы можно было использовать только один класс в селекторе, что-то вроде .header-contacts-phone или еще проще .header-phone