Посмотреть все уроки курса
Выбрать другой урок из курса
Поиск по сайту
Теория урока
@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ

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

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

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

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

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

Похожие уроки Codebra

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
Работа с файлами в PythonЗнакомство с Python
Свойство background для работы с фономЦвета и фон
Основы объектно-ориентированного программирования (ООП) в PythonЗнакомство с Python
Пользовательские функции в PHPКурс по PHP
Первое знакомство с PythonЗнакомство с Python
Погружение в PythonЗнакомство с Python
Переменные, комментарии и типы данных в PHPКурс по PHP
Типы данных в PythonЗнакомство с Python
Итоги раздела «Структуры данных в Python»Знакомство с Python
<
×
>
Раздел «Селекторы в CSS»
81. УРОК: Основные правила и знакомство с селекторами
82. УРОК: Группировка селекторов в CSS
83. УРОК: Селекторы классов и идентификаторов
84. УРОК: Несколько классов
85. УРОК: Селекторы идентификаторов (id селекторы)
УРОК 86. Селекторы атрибутов: простой выбор
Вы здесь
87. УРОК: Селекторы атрибутов: по конкретному значению
88. УРОК: Селекторы атрибутов: по частичному значению
89. УРОК: Селекторы атрибутов: по конкретному атрибуту
90. УРОК: Структура документа: родитель-потомок в CSS
91. УРОК: Структура документа: дочерние элементы в CSS
92. УРОК: Структура документа: сестринские элементы в CSS
93. УРОК: Псевдоклассы: ссылки
94. УРОК: Псевдоклассы: первый дочерний элемент
95. УРОК: Псевдоэлементы: первая буква и строка
Другие разделы
Раздел 1. Знакомство с HTML
Раздел 2. Разметка текста в HTML
Раздел 3. Ссылки в HTML
Раздел 4. Изображения в HTML
Раздел 5. Таблицы в HTML
Раздел 6. Формы в HTML
Раздел 7. HTML5
Раздел 8. Остальное
Раздел 9. Знакомство с CSS
Раздел 11. Структура и каскад
Раздел 12. Единицы измерения
Раздел 13. Шрифт
Раздел 14. Свойства текста
Раздел 15. Форматирование
Раздел 16. Отступы, рамки, поля
Раздел 17. Цвета и фон
Раздел 18. Позиционирование
Раздел 19. Верстка таблиц
Раздел 20. Списки
Раздел 21. Анимация
Раздел 22. Знакомство с Flexbox
Раздел 23. Практика с htmlbook.ru
Раздел 24. Элементы сайта
Впервые на сайте Codebra?

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

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

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

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

Закрыть окно