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

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

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

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

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

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

1. Сделайте цвет текста только первого абзаца красным. Вам нужно добавить подходящие селекторы атрибутов к уже написаному CSS коду.

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить на любом популярном форуме в интернете.