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

Будет тяжело объяснить словами работу данного селектора. Поэтому сразу смотрим на первый пример. Кстати, вы же знаете, что в классах можно использовать дефис, то есть: 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"]

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

– Не знаете как сделать? Нажмите на кнопку Обсуждение и задайте вопрос!