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