Как повторно использовать селектор CSS?

Question

У меня есть следующий CSS:

.foo .bar {
   background: red;
}

Что отлично работает для следующего HTML:

<div class="foo">
    <div class="bar">I have a red background</div>
</div>

Но я не могу найти способ повторно использовать определение CSS, когда у меня нет отношений родитель / потомок. Например, как я могу применить тот же CSS к следующему DIV:

<div class="???">I want a red background!</div>

Answer 1

Вы можете добавить дополнительный селектор с запятой (,), как указано в Группировка селекторов W3C

.foo .bar, .foobar {
   background: red;
}

это будет работать в обоих

<div class="foo">
    <div class="bar">I have a red background</div>
</div>

и

<div class="foobar">I want a red background!</div>

Answer 2

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

.foo .bar, .??? {
   background: red;
}

Answer 3

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

.foo .bar, .otherSelector, #someID{
    background: red;
}

Answer 4

Определение CSS ".foo .bar" написано специально для отношений родитель-потомок (точнее, предок-потомок).

Вы можете написать CSS следующим образом:

.alternate-background {
   background: red;
}

и HTML, как это:

<div>
    <div class="alternate-background">I have a red background</div>
</div>

, что позволит вам также использовать это:

<div class="alternate-background">I want a red background!</div>

Answer 5

Попробуйте

.foo .bar, .foobar {
   background: red;
}

с

<div class="foo">
    <div class="bar">I have a red background</div>
</div>

<div class="foobar">I want a red background!</div>

Answer 6

.foo .bar, .redback {
     background: red;
}

сотворит магию с

<div class="redback">I want a red background!</div>

или избавьтесь от иерархии и используйте только

.bar {
     background: red;
}

, который будет работать в обоих случаях