103. Селекторы атрибутов: по конкретному атрибуту

Будет тяжело объяснить словами работу данного селектора. Поэтому сразу смотрим на первый пример. Кстати, вы же знаете, что в классах можно использовать дефис, то есть: block-main, block-title и так далее.

<div class = "main-header">блок 1</div>
<div class = "main-content">блок 2</div>
<div class = "main-footer">блок 3</div>

Что общего между классами div блоков? Все они начинаются так: main-. Теперь рассмотрим второй CSS пример.

div[class |= "main"] {
    color: red;
}

Стиль применяется к элементам, у которых атрибут или равен указанному значению или начинается с указанного значения, после которого идет дефис. Поэтому стиль из второго примера будет работать и в третьем примере.

<div class = "main">блок</div>

Грубо говоря, селектор div[class |= "main"] объединяет воедино два селектора: div[class ^= "main"] и div[class ^= "main-"]. Про ^= можете узнать из этого урока.

Похожие уроки и записи блога

1. При помощи селектора по конкретному атрибуту сделайте цвет текста всех div красным. Например, div[id |= "min"]

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить на любом популярном форуме в интернете.