Сегодня хотелось бы кратко поговорить о CSS-селекторах, которые помогают задать стиль в зависимости от значения любого атрибута. Они введены в CSS3 и представляют собой весьма упрощенные регулярные выражения для поиска совпадения в начале, в середине или конце значения атрибута.
В общем виде рассматриваемые правила CSS записываются в формате:
[attr^="value"] – совпадение в начале значения атрибута [attr$="value"] – совпадение в конце значения атрибута [attr*="value"] – совпадение в любом месте значения атрибута
Здесь attr — это атрибут тэга, например, title, href, src и т.д., value — его значение. Для наглядности, вот пример, который выбирает из дерева DOM все теги A, у которых href оканчивается на .pdf:
a[href$='.pdf'] {
...
}
Какова практическая польза от таких селекторов? Чтобы не уходить далеко от вышеприведенного примера, можно настроить CSS-правила для подсветки ссылок на файлы в зависимости от их расширения: pdf выводить с одной иконкой, xls — с другой, причем, без лишних хлопот на стороне сервера. Приведу действующий пример:
Поиск по началу значения может пригодиться для подсветки ссылок с mailto, с выводом иконки конвертика. В общем, много интересных применений можно найти для описываемых селекторов. Как их применяете вы? Пишите в комментариях :)