Вызов класса CSS внутри другого класса?

Возможно ли иметь ссылку на один класс CSS? Вместо того, чтобы снова переписать код css?

Например, у меня есть это:

.btn{
    /* Whatever btn related styles I have */
}

.btn:hover{
    box-shadow:0 0 4px black;
}

.btn:active{
    /* This is where I want to reference the '.red' class */
}

.red{
    /* There is a LOT of CSS code here for cross browser gradients */
}

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

Если вы можете помочь решить (возможно, не так, как я его просил), я бы очень признателен...

ОТВЕТЫ

Ответ 1

На самом деле вы не можете сделать ссылку (один из основных недостатков CSS), но вы можете сделать это:

.btn:active, .red {
    /* Block A: Most (or all) of what used to just be in .red below */
}

.btn:active {
    /* Block B: Stuff *just* for .btn:active, if any */
}

.red {
    /* Block C: Stuff *just* for .red, if any */
}

Запятая означает, что определения в теле блока А применяются отдельно к каждому из этих селекторов, и поэтому они применяются к любым элементам ".btn", которые являются ": активными" и отдельно применяются к любому ".red", элементы.

Блок B и блок C являются необязательными. Они предназначены для любых определений, которые вы хотите применить только к данному селектору. Вы обычно указываете их после блока А, потому что правила одинаковой специфичности применяются сверху вниз, поэтому вы можете переопределить что-либо из блока А, который вы хотите в блоке B или блоке C, и эти блоки "выиграют".