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

Question

[OneDayHabbit]

Допустим у меня вот такой код:

<div id="id3">
            <div class="id3-container">
                <div class="id3-div1">
                    <div class="id3-div1-img"></div>
                    <div class="id3-div1-mainText">Lorem ipsum
                        dolor sit amet</div>
                    <div class="id3-div1-additionalText">Lorem ipsum dolor sit amet, consectetur adipi scing elit, sed do ei usmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum sus pendisse ultrices gravida. </div>
                </div>
                <div class="id3-div2">
                    <div class="id3-div2-img"></div>
                    <div class="id3-div2-mainText">Lorem ipsum
                        dolor sit amet</div>
                    <div class="id3-div2-additionalText">Lorem ipsum dolor sit amet, consectetur adipi scing elit, sed do ei usmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum sus pendisse ultrices gravida. </div>
                </div>
                <div class="id3-div3">
                    <div class="id3-div3-img"></div>
                    <div class="id3-div3-mainText">Lorem ipsum
                        dolor sit amet</div>
                    <div class="id3-div3-additionalText">Lorem ipsum dolor sit amet, consectetur adipi scing elit, sed do ei usmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum sus pendisse ultrices gravida. </div>
                </div>
            </div>
</div>

Как мне выбрать 1 строчкой кода CSS все теги с классами id[number]-div[number]-mainText/additionalText, не перечисляя их, грубо говоря, как написать вот это, чтоб оно работало?
div[class^="id[AnyNumber]-div[AnyNumber]-[mainText/additionalText]"]
В скобки я взял то, что может изменяться AnyNumber=любое число, mainText/AdditionalText - варианты, того что может быть в последнем слове(словосочетании).

Заранее прошу прощение за возможную не точность передачи задачи, только учусь.

UPD
div[class*="div"][class*="additionalText"]
Нельзя ли это упростить ?

Comments

[Юрий Матрос]

#id3 * {}

Answer 1

[imko]

Никак, либо генерить препроцессором кучу селекторов, либо просто добавить уникальную для этой группы элементов приставку/суффикс к айди/классу и селектить по ^= или &=

Answer 2

[Вадим]

Цифры никак не пропихнуть. Регулярные выражения в css не поддерживаются.
Но можно выделить общий "паттерн" из названия класса id3-div1-mainText
[class^="id"] - атрибут класс начинается с id и
[class*="-div"] - атрибут класс содержит -div и
[class$="-mainText"] - атрибут класс заканчивается на -mainText

Итого:

[class^="id"][class*="-div"][class$="-mainText"] {
  color: red
}

Не самый эффективный селектор, но задачу решает. Ну и в зависимости от других классов в разметке средняя часть селектора может быть не обязательной.

Тут важно понимать, что такой class: id-lorem-div-ipsum-mainText тоже подойдёт под предложенный выше селектор.