Внимание! На этой странице вы найдете материал урока из архивного курса по CSS. Курс был написан в 2015 и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по CSS и на странице первого урока.
- Сделайте цвет текста только первого абзаца красным. Вам нужно добавить подходящие селекторы атрибутов к уже написанному CSS коду.
Существует четыре типа селекторов атрибута. Вот о них и будет несколько уроков. В этом уроке рассмотрим первый из них.
Простой выбор
Простой выбор, это выбор только по атрибуту, независимо от его значения. Допустим, нам нужно сделать текст элементов красным, но только тех, которые имеют атрибут target. Это реализовано в первом примере.
*[target] {
color: red;
}Теперь добавим HTML и посмотрим, как будут работать наши селекторы. Второй пример.
<a href = "#" target = "_blank">ссылка 1</a>
<a href = "#" target = "_self">ссылка 2</a>
<a href = "#">ссылка 3</a>Все просто и предсказуемо. Две первые ссылки будут красного цвета.
Или мы хотим сделать цвет всех ссылок зеленым, у которых есть атрибут title. Это в третьем примере.
a[title] {
color: green;
}Между элементом и квадратной скобкой нет пробела! Обратите на это внимание!
Это еще не все. Можно выбирать на основании наличия нескольких атрибутов. Сделаем ссылки желтого цвета, которые имеют атрибуты title и target. Смотрим на четвертый пример.
a[target][title] {
color: yellow;
}Порядок перечисления атрибутов не важен, поэтому в примере 5 все то же самое.
a[title][target] {
color: yellow;
}Теперь посмотрим на шестой пример. Там три ссылки. Из них желтой будет только вторая.
<a href = "#" target = "_blank">ссылка 1</a>
<a href = "#" target = "_self" title = "ссылка 2">ссылка 2</a>
<a href = "#">ссылка 3</a>На этом мы закончили знакомство с простыми селекторами атрибутов.
Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу CSS.
