Урок с практикой по CSS (Онлайн курсы)
Выбрать другой урок из курса
Теория урока

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

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

Пример 1
<div class = "main-header">блок 1</div>
<div class = "main-content">блок 2</div>
<div class = "main-footer">блок 3</div>

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

Пример 2
div[class |= "main"] {
color: red;
}
Обратите внимание на то, что написано "main", а не "main-", это важно!

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

Пример 3
<div class = "main">блок</div>

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

<
×
>
Курс «Селекторы в CSS»
Урок 1.1. Основные правила и знакомство с селекторами
Урок 2.1. Группировка селекторов в CSS
Урок 3.1. Селекторы классов и идентификаторов
Урок 4.1. Несколько классов
Урок 5.1. Селекторы идентификаторов (id селекторы)
Урок 6.1. Селекторы атрибутов: простой выбор
Урок 7.1. Селекторы атрибутов: по конкретному значению
Урок 8.1. Селекторы атрибутов: по частичному значению
Урок 10.1. Структура документа: родитель-потомок в CSS
Урок 11.1. Структура документа: дочерние элементы в CSS
Урок 12.1. Структура документа: сестринские элементы в CSS
Урок 13.1. Псевдоклассы: ссылки
Урок 14.1. Псевдоклассы: первый дочерний элемент
Урок 15.1. Псевдоэлементы: первая буква и строка
Другие курсы
Курс 1. Знакомство с HTML
Курс 2. Разметка текста
Курс 3. Ссылки
Курс 4. Изображения
Курс 5. Таблицы
Курс 6. Формы
Курс 7. HTML5
Курс 8. Остальное
Курс 9. Знакомство с CSS
Курс 11. Структура и каскад
Курс 12. Единицы измерения
Курс 13. Шрифт
Курс 14. Свойства текста
Курс 15. Форматирование
Курс 16. Отступы, рамки, поля
Курс 17. Цвета и фон
Курс 18. Позиционирование
Курс 19. Верстка таблиц
Курс 20. Списки
Курс 21. Анимация
Внимание! Впервые на этом сайте?

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Вы можете начать изучение прямо сейчас, кликнув на ссылки: HTML, CSS, JavaScript, C++, PHP, jQuery, Python, Bootstrap 3

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно