Посмотреть все уроки курса
Выбрать другой урок из курса
Поиск по сайту
Теория урока

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

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

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

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

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

Похожие уроки и записи блога

Первое знакомство с PythonЗнакомство с Python
Свойство background для работы с фономЦвета и фон
Основы объектно-ориентированного программирования (ООП) в PythonЗнакомство с Python
Погружение в PythonЗнакомство с Python
Работа с файлами в Python Знакомство с Python
Написание модулей в PythonЗнакомство с Python
Модули в PythonЗнакомство с Python
Типы данных в PythonЗнакомство с Python
Селекторы атрибутов: по частичному значениюСелекторы в CSS
<
×
>
Раздел «Селекторы в CSS»
95. УРОК: Основные правила и знакомство с селекторами
96. УРОК: Группировка селекторов в CSS
97. УРОК: Селекторы классов и идентификаторов
98. УРОК: Несколько классов
99. УРОК: Селекторы идентификаторов (id селекторы)
УРОК 100. Селекторы атрибутов: простой выбор
Вы здесь
101. УРОК: Селекторы атрибутов: по конкретному значению
102. УРОК: Селекторы атрибутов: по частичному значению
103. УРОК: Селекторы атрибутов: по конкретному атрибуту
104. УРОК: Структура документа: родитель-потомок в CSS
105. УРОК: Структура документа: дочерние элементы в CSS
106. УРОК: Структура документа: сестринские элементы в CSS
107. УРОК: Псевдоклассы: ссылки
108. УРОК: Псевдоклассы: первый дочерний элемент
109. УРОК: Псевдоэлементы: первая буква и строка
Другие разделы
Раздел 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. Элементы сайта
Раздел 24. Знакомство с Flexbox
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

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

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

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

Закрыть окно