Как задать цвет рамки типовой кнопки?

Question

[Dmitry]

Создал кнопку из ссылки a href class=buutons. Задал в классе .buttons параметры, общие для всех кнопок такого типа. В том числе цвет рамки. Теперь нужно у каждого экземпляра типовой кнопки задать разный цвет рамки. Добавляю каждой кнопке ещё один класс button-a, button-b и т.д. с заданием в нём цвета рамки. Но цвет рамки, заданный в общем классе .buttons перебивает эти цвета. Есть решение или надо для каждой кнопки делать отдельный класс и каждый раз повторять все стили?

Comments

[Михаил Ливач]

покажите css. В идеале - в песочнице

[Hovhannes Varosyan]

читай документацию, !important, :nth-child, Иерархия специфичности CSS.

[Dmitry]

Михаил Ливач, Зачем? Мне написали тут подробный ответ с кодом, как сделать, но его удалили. Хорошо, что хоть на почте остаётся.

[Dmitry]

Hovhannes Varosyan, Мне написали ответ, как сделать, но его тут удалили. Хорошо, что хоть на почте остаётся. !important в моём случае не работает.

[Ankhena]

Dmitry,

Зачем?

Обычно за тем, чтобы дать вам хороший ответ, а не рекомендацию использовать !important или наращивать специфичность, что, конечно, решит проблему "прям щас", но увеличит вероятность и сложность последующих.

Answer 1

[alexalexes]

Почитайте про специфичность селекторов css. Вы же в курсе, что каждый селектор имеет очки специфичности?
Если селекторы описаны одинаково, то они будут иметь одинаковые очки специфичности, и перекрытие свойств будет происходить по порядку следования селекторов в файле css (или в порядке подключения css в html). Вероятно, у вас такая ситуация:

.button-a
{
  border-color: #0000ff;
}
.button-b
{
  border-color: #00ff00;
}
/*Свойства этого селектора переопределяют вышестоящие селекторы, так как они все имеют одни и те же веса специфичности */
.buttons
{
  border-color: #00ffff;
}

Чтобы решить вашу проблему, нужно либо строго соблюдать порядок описания селекторов:

.buttons
{
  border-color: #00ffff;
}
.button-a
{
  border-color: #0000ff;
}
.button-b
{
  border-color: #00ff00;
}

Такой подход обойдется малыми усилиями и не нужно отходить от какой-нибудь принятой методологии именования классов, например, БЭМ, которая не позволяет усложнять селекторы.
Но если вы не следуете методологии, то можно наращивать специфичность селекторам, например, так:

.buttons.button-a
{
  border-color: #0000ff;
}
.buttons.button-b
{
  border-color: #00ff00;
}
/* Этот селектор не может перебить свойства вышестоящих селекторов, так как у него ниже вес специфичности */
.buttons
{
  border-color: #00ffff;
}

В таком виде определения элементов, содержащих button-a и button-b можно писать в любом порядке, так как у них выше специфичность по сравнению с селектором, который содержит только класс buttons.