Стили для особых ссылок
Некоторые виды ссылок порой хочется визуально выделить. Но при этом присваивать каждой из них определенный класс будет неудобно и долго. Используя селекторы атрибутов, можно делать выборку ссылок, исходя из того, на какой тип документа она ссылается, на какой домен ведет и т. д.
На позапрошлом уроке мы показывали, как можно обозначить ссылку, которая открывается в новой вкладке (или новом окне). Там мы воспользовались селектором, который выбирает все ссылки, у которых есть атрибут target со значением _blank. Сегодня мы углубимся в тему селекторов атрибутов и покажем, в каких еще ситуациях они могут стать полезными.
Ссылки на e-mail и телефон
При клике по ссылке, содержащей адрес электронной почты или номер телефона, обычно запускается почтовый клиент / набор номера. О таком поведении желательно предупредить пользователей, добавив для таких ссылок специальное обозначение. Каким образом выбрать все ссылки на сайте, которые начинаются с приставки mailto:? Легко — с помощью селектора атрибута:
a[href^="mailto:"] { /* ваш стиль для ссылок на электронную почту */ }
Символ ^, указанный перед символом равенства, можно перевести как «начинается с». Иными словами, мы выбираем все теги <a>, у которых есть атрибут href со значением, начинающимся на mailto:, и пишем для этой группы элементов свой стиль CSS.
Аналогично можно поступить и со ссылками, содержащими номера телефонов. Обычно перед номером телефона указывается ключевое слово tel:, поэтому мы можем сделать выборку по нему:
a[href^="tel:"] { ... }
Если вам нужно добавить специальный стиль для ссылок с номерами телефонов определенной страны (например, обозначить их небольшим флажком), вы можете без проблем сделать и это. Достаточно добавить к предыдущему селектору код страны (для примера пусть это будет +44):
a[href^="tel:+44"] { ... }
То же самое можно проделать и с мобильными операторами:
a[href^="tel:+38067"] { ... }
А также можно выбрать ссылки, которые ведут на определенный сайт:
a[href^="https://www.facebook.com"] { ... }
Ссылки на файлы
Вы можете определять не только, как начинается ссылка, но и как она заканчивается. Это весьма полезно, когда нужно стилизовать ссылки, которые ведут к определенным файлам. Например, чтобы выбрать ссылки на ZIP-архив, запишите:
a[href$=".zip"] { ... }
Символ $, указанный перед символом равенства, можно перевести как «заканчивается на». То есть, мы выбираем элементы <a>, у которых есть атрибут href со значением, заканчивающимся на .zip.
Безусловно, аналогичным способом вы можете находить и стилизовать ссылки на другие файлы, например, .png, .pdf, .mp3, .xlsx и так далее.
Ссылки с data- атрибутами
В HTML5 есть возможность добавлять пользовательские атрибуты к любому тегу. Эти атрибуты используются для хранения различных значений. Атрибут, который добавляется, обязательно должен начинаться с приставки data-, после чего может идти произвольное имя. Одним из практических вариантов применения таких атрибутов является создание всплывающих подсказок с текстом, который как раз и хранится в значении пользовательского атрибута.
Позже в книге мы рассмотрим способ использования таких атрибутов, а пока что покажем, как можно выбрать ссылки с data- атрибутом через соответствующий селектор. Допустим, что у некоторых ссылок есть пользовательский атрибут data-description. Обратиться к ним можно следующим образом:
a[data-description] { ... }
Как вы догадываетесь, можно делать подобные выборки не только на основе data- атрибутов, а и на основе любых других — rel, title, target, class и т. д.
В следующем уроке мы разберем популярную современную технику хранения и использования фоновых изображений, которая помогает повысить производительность сайта — спрайты CSS.
