Как задать несколько свойств для нескольких элементов, но в рамках одного идентификатора?

Question

[Виктор Гузинов]

Как упростить обращение к элементам?

<div>
  <div class="main1">
    <div class="sub1">
    Block 1
    </div>
      <div class="sub2">
    Block 2
    </div>
      <div class="sub3">
    Block 3
    </div>
  </div>
<br>
  <div class="main2">
    <div class="sub1">
    Block 5
    </div>
 ....
  </div>
</div>

.main1 .sub1 {color:red}
.main1 .sub2 {color:red}
.main1 .sub3 {color:red}
/* или */
.main1 .sub1, .main1 .sub2, .main1 .sub3 {color:red}

У меня главные классы (main) отличаются, а подклассы одинаковые
Стоит задача обращения к подклассам, но получается не удобно перечислять каждый раз какому классу принадлежит подкласс.
Можно ли упростить (сгруппировать) обращение? Типа:

.main1 {
  .sub1 {color:red}
  .sub2 {color:red}
  .sub2 {color:red}
}

Comments

[Rustam Bainazarov]

На данный момент и на чистом CSS — нет.

Такая конструкция будет работать только в препроцессоре.

[Dymok]

Можно задать для подклассов один общий класс, например так:

<div>
  <div class="main1">
    <div class="sub sub1">
    Block 1
    </div>
      <div class="sub sub2">
    Block 2
    </div>
      <div class="sub sub3">
    Block 3
    </div>
  </div>
<br>
  <div class="main2">
    <div class="sub sub1">
    Block 5
    </div>
 ....
  </div>
</div>

Можно Использовать селектор вида main1 > *, если в main1 не помещено ничего больше.
Либо, как сказано выше, использовать любой препроцессор.

Answer 1

[Flying]

В SCSS это легко решается через @extends:

%subsclasses-color {
  .sub1, .sub2, .sub3 {
    color:red;
  }
}
.main1 {
  @extends %subclasses-color;
}
.another-main {
  @extends %subclasses-color;
}

Comments

[Виктор Гузинов]

спасибо, я как раз думал в сторону scss (ну или sass.. хз), но никогда почти с ним не стыкался
на досуге попробую вникнуть

Answer 2

[Жук]

<div class="main1">
    <div class="sub"></div>
    <div class="sub"></div>
    <div class="sub"></div>
  </div>

  <div class="main2">
    <div class="sub"> </div>
    <div class="sub"> </div>
    <div class="sub"> </div>
  </div>

Вы пишите "У меня главные классы (main) отличаются, а подклассы одинаковые"
Соответственно зачем sub нумеровать если там одинаковый стиль будет?

.main1 {
  .sub { color: red }
}

.main2 {
  .sub { color: blue }
}

Comments

[Виктор Гузинов]

не-не-не
я мож не совсем точно выразился.. как видите из моего куска кода, sub одинаковые только в контексте главных классов (main) но между собой разные
main1
sub1
sub2
sub3
main2
sub1
sub2
sub3

[Жук]

Виктор Гузинов, пишите в лоб перечислениями, потому что у вас стили будут для каждого Sub-N разные