Внимание! На этой странице вы найдете материал урока из архивного курса по CSS. Курс был написан в 2015 и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по CSS и на странице первого урока.
- При помощи селектора по конкретному атрибуту сделайте цвет текста всех
divкрасным. Например,div[id |= "min"]
Будет тяжело объяснить словами работу данного селектора. Поэтому сразу смотрим на первый пример. Кстати, вы же знаете, что в классах можно использовать дефис, то есть: 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;
}Обратите внимание на то, что написано "main", а не "main-", это важно!
Стиль применяется к элементам, у которых атрибут или равен указанному значению или начинается с указанного значения, после которого идет дефис. Поэтому стиль из второго примера будет работать и в третьем примере.
<div class = "main">блок</div>Грубо говоря, селектор div[class |= "main"] объединяет воедино два селектора: div[class ^= "main"] и div[class ^= "main-"]. Про ^= можете узнать из этого урока.
Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу CSS.
