Вы когда нибудь задумывались как можно упростить себе жизнь зная при этом некоторые атрибуты css, с помощью которых можно сделать достаточно много различных манипуляций. В данном уроке мы рассмотрим селектор атрибутов css, с помощью которых можно определить тип файлов. Эта функция будет практично смотреться при маркировке изображений, то есть обозначать тип загруженного изображения, к примеру, и выводить его атрибуты в одном из углов изображения, при этом будет применяться подкладка под текст.

Для начала, если вы еще не сталкивались с данными вроде заумными словами, мы разберемся, что же это такое атрибутивные селекторы и для чего они вообще нужны. Атрибутивные селекторы – это действительно удобная вещь, с помощью которой мы можем выбирать элемент без дополнительных классов или id. До тех пор, пока указанный элемент имеет атрибут вроде href, src и type, нам не придется этого делать.

Синтаксис и браузерная поддержка

Тип файла всегда указывается в конце имени файла. Так что, для того чтобы выбрать тип файла, мы можем использовать следующий синтаксис [attr$=»value»]. Данный синтаксис использует оператор $=, который будет указывать на конец значения атрибута. К примеру:

Вышеприведенный отрезок кода будет выделять каждую ссылку, значение атрибута которой заканчивается на .pdf, и вставлять иконку в виде текстового документа в псевдо-элемент :before.

Источник иконки PDF: Fugue Icons

Хотя в этом и заключается основной способ применения данного селектора, мы безусловно можем пойти дальше этого.

Что касается поддержки браузерами: несмотря на то, что данный синтаксис официально представлен в спецификации CSS3, он прекрасно поддерживался со времен IE7, так что вы можете без проблем применять его во всех дизайнах.

Пример

Вы никогда не узнаете, если не попробуете. Нам нужно просто попробовать сделать нечто новое, чтобы лучше понять то, как оно устроено. Сейчас мы собираемся продемонстрировать, насколько удобным может быть данный синтаксис в тех случаях, когда нам нужно указать элемент определенной HTML-структуре, что довольно сложно сделать, если использовать простой код CSS.

Ниже мы приводим HTML5-структуру, которая будет отображать 3 изображения с подписями. Это только лишь для примера, поэтому ваша разметка не должна обязательно в точности все повторять (вы можете использовать только одно изображение или наоборот гораздо больше трех), но суть заключается в том, что понять, как применять синтаксис в конкретной HTML-структуре.

Каждое из приведенных выше изображений имеет следующие форматы (или расширения): jpg, png и gif. Здесь также есть подписи, которые описывают расширение изображения – позже эти подписи будут служить ярлыками для изображений.

Итак, по плану мы собираемся задать разные цвета фона для подписей к изображениям разных форматов. Изображение JPG будет оформлено зеленым цветом подписи, PNG-изображение – синим, а последнее, GIF, получит фиолетовый цвет.

Для начала давайте выставим относительное позиционирование, так как у подписей будет абсолютное позиционирование.

Добавляем небольшую декорацию к изображениям с границами и тенями.

Затем мы выставляем стандартный стиль и позиционирование подписи. Подпись или ярлык изображений будут оформлены квадратом размер которого равен 50 пикселям.

Теперь пришло время добавить фоновый цвет. Для этого мы можем комбинировать селектор атрибута со смежным родственным селектором.

Вышеприведенный отрезок кода будет выделять каждое изображение, атрибут источника которого заканчивается на .jpg, затем смежный селектор обнаружит следующий за ним элемент. В данном случае, figcaption будет добавлен с фоновым цветом #a8b700.

А здесь мы приводим коды для остальных форматов изображения: png и gif.

Надеемся, что вы уяснили суть оформления посредством специального селектора. Итак, в следующий раз когда вы будете разрабатывать стили для вашего HTML, мы настоятельно рекомендуем вам провести небольшое исследование на предмет наличия подходящих селекторов, и использовать их, вместо того чтобы добавлять классы или id.

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях. Огромная благодарность выражается сайту coolwebmasters.com, за предоставленный перевод текста.

Читайте также: