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

Селекторы атрибутов: простой выбор

Существует четыре типа селекторов атрибута. Вот о них и будет несколько уроков. В этом уроке рассмотрим первый из них.

Простой выбор

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

Пример 1
*[target] {
color: red;
}

Теперь добавим HTML и посмотрим, как будут работать наши селекторы. Второй пример.

Пример 2
<a href = "#" target = "_blank">ссылка 1</a>
<a href = "#" target = "_self">ссылка 2</a>
<a href = "#">ссылка 3</a>

Все просто и предсказуемо. Две первые ссылки будут красного цвета.

Или мы хотим сделать цвет всех ссылок зеленым, у которых есть атрибут title. Это в третем примере.

Пример 3
a[title] {
color: green;
}
Между элементом и квадратной скобкой нет пробела! Обратите на это внимание!

Это еще не все. Можно выбирать на основании наличия нескольких атрибутов. Сделаем ссылки желтого цвета, которые имеют атрибуты title и target. Смотрим на четвертый пример.

Пример 4
a[target][title] {
color: yellow;
}

Порядок перечисления атрибутов не важен, поэтому в примере 5 все то же самое.

Пример 5
a[title][target] {
color: yellow;
}

Теперь посмотрим на шестой пример. Там три ссылки. Из них желтой будет только вторая.

Пример 6
<a href = "#" target = "_blank">ссылка 1</a>
<a href = "#" target = "_self" title = "ссылка 2">ссылка 2</a>
<a href = "#">ссылка 3</a>

На этом мы закончили знакомство с простыми селекторами атрибутов.

<
×
>
Курс «Селекторы в CSS»
Урок 1.1. Основные правила и знакомство с селекторами
Урок 2.1. Группировка селекторов в CSS
Урок 3.1. Селекторы классов и идентификаторов
Урок 4.1. Несколько классов
Урок 5.1. Селекторы идентификаторов (id селекторы)
Урок 7.1. Селекторы атрибутов: по конкретному значению
Урок 8.1. Селекторы атрибутов: по частичному значению
Урок 9.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. Анимация
Курс 22. Практика с htmlbook.ru
Курс 23. Элементы сайта
Не публикуйте свой код прямо в комментариях. Во-первых, он плохо отображается. Во-вторых, он может содержать для кого-то «спойлеры», т.е. ответы на практику. Воспользуйтесь специальными сервисами: cssdeck.com или jsfiddle.net.
Комментарии, содержащие код (пару строк не считается), будут безжалостно удаляться.