Продвинутые CSS-селекторы

Чтобы задать стиль элементу, мы используем атрибут class и id, например, у нас есть два блока, один с классом class_block, второй с идентификатором id_block:

<div class="class_block">
    <!-- Содержимое блока -->
</div>

<div id="id_block">
    <!-- Содержимое блока -->
</div>

Зная этот класс и идентификатор, мы можем стилизовать оба блока, как нам вздумается:

.class_block {
    /* Свойства блока с классом class_block */
}

#id_block {
    /* Свойства блока с идентификатором id_block */ 
}

Но что делать, если нам не известны названия класса и идентификатор? Возможно потому, что часть значения атрибута генерируется динамически. На помощь могут придти, так сказать продвинутые CSS-селекторы. Привожу пример динамически созданного идентификатора: 123_block - _block - постоянная часть названия идентификатора, цифры: 123 сгенерированы скриптом, в другом блоке эти цифру уже будут другие, одинаковых чисел в пределах одного документа не должно быть:

<div id="123_block">
    <!-- Содержимое блока -->
</div>

<div id="124_block">
    <!-- Содержимое блока -->
</div>

<div id="125_block">
    <!-- Содержимое блока -->
</div>

Чтобы задать этим блокам стиль, делаем так:

div[id$="_block"] {
    /* Свойства блока с идентификатором xxx_block */ 
}

Что к чему и для чего (разбираем код): первая строчка начинается с "указателя", в каком элементе будем искать атрибут и совпадение, в данном случаи в блоке (<div>). Дальше в квадратных скобках сообщаем браузеру, что блоки надо искать с атрибутом id, после указанного атрибута следует знак доллара ($) - это значит, что поиск значения атрибута будет проходить по второй части значения атрибута, то есть окончания значений не изменяемо, а начало постоянно разное.

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

<style>
div[id$="_block"] {
    color: #008000;
}
</style>

<div id="123_block">
    Блок с id 123_block
</div>

<div id="124_block">
    Блок с id 124_block
</div>

<div id="125_block">
    Блок с id 125_block
</div>

Мы рассмотрели как поступать с динамичным значением идентификатора, но у нас же есть еще и классы. А с классами все тоже самое, только вместо id пишем class:

div[class$="_block"] {
    /* Свойства блока с идентификатором xxx_block */ 
}

Проверить можно используя код:

<style>
div[class$="_block"] {
    color: #008000;
}
</style>

<div class="123_block">
    Блок с class 123_block
</div>

<div class="124_block">
    Блок с class 124_block
</div>

<div class="125_block">
    Блок с class 125_block
</div>

Теперь, в своем коде мы использовали знак доллара ($) - ищем совпадение по окончанию значения атрибута (вторая часть строки), но может быть, что совпадение надо искать по началу значения (первая часть строки), тогда вместо знака доллара надо писать ^:

div[class^="block_"] {
    /* Свойства блока с классом class_block */
}

Код блока:

<div class="block_123">
    <!-- Содержимое блока -->
</div>

Хочу заметить, что в этом сообщении показаны примеры работы только с блоком (<div>), но на самом деле работать можно с многими элементами.