Селекторы атрибутов были доступные еще с выхода CSS 2.1, и на сегодняшний день в спецификацию CSS3 были добавлены новые типы, и теперь мы можем даже более конкретно указывать атрибуты элемента.
В нашей сегодняшней статье мы хотим использовать один из синтаксисов для выбора типа файла, который включен в виде части значения атрибута.
Синтаксис и браузерная поддержка
Тип файла всегда указывается в конце имени файла. Так что, для того чтобы выбрать тип файла, мы можем использовать следующий синтаксис [attr$="value"]. Данный синтаксис использует оператор $=, который будет указывать на конец значения атрибута. К примеру:
a[href$=".pdf"]:before {
background: url('../images/document-pdf-text.png') no-repeat;
}
Вышеприведенный отрезок кода будет выделять каждую ссылку, значение атрибута которой заканчивается на .pdf, и вставлять иконку в виде текстового документа в псевдо-элемент :before.
Источник иконки PDF: Fugue Icons
Хотя в этом и заключается основной способ применения данного селектора, мы безусловно можем пойти дальше этого.
Что касается поддержки браузерами: несмотря на то, что данный синтаксис официально представлен в спецификации CSS3, он прекрасно поддерживался со времен IE7, так что вы можете без проблем применять его во всех дизайнах.
Пример
Вы никогда не узнаете, если не попробуете. Нам нужно просто попробовать сделать нечто новое, чтобы лучше понять то, как оно устроено. Сейчас мы собираемся продемонстрировать, насколько удобным может быть данный синтаксис в тех случаях, когда нам нужно указать элемент определенной HTML-структуре, что довольно сложно сделать, если использовать простой код CSS.
Ниже мы приводим HTML5-структуру, которая будет отображать 3 изображения с подписями. Это только лишь для примера, поэтому ваша разметка не должна обязательно в точности все повторять (вы можете использовать только одно изображение или наоборот гораздо больше трех), но суть заключается в том, что понять, как применять синтаксис в конкретной HTML-структуре.
<ul>
<li>
<figure>
<img src="images/macpro.jpg">
<figcaption>jpg</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/macpro.png">
<figcaption>png</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/macpro.gif">
<figcaption>gif</figcaption>
</figure>
</li>
</ul>
Каждое из приведенных выше изображений имеет следующие форматы (или расширения): jpg, png и gif. Здесь также есть подписи, которые описывают расширение изображения – позже эти подписи будут служить ярлыками для изображений.
Итак, по плану мы собираемся задать разные цвета фона для подписей к изображениям разных форматов. Изображение JPG будет оформлено зеленым цветом подписи, PNG-изображение – синим, а последнее, GIF, получит фиолетовый цвет.
Для начала давайте выставим относительное позиционирование, так как у подписей будет абсолютное позиционирование.
figure {
position: relative;
}
Добавляем небольшую декорацию к изображениям с границами и тенями.
img {
border: 5px solid #ccc;
-webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, .5);
}
Затем мы выставляем стандартный стиль и позиционирование подписи. Подпись или ярлык изображений будут оформлены квадратом размер которого равен 50 пикселям.
img + figcaption {
color: #fff;
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
}
Теперь пришло время добавить фоновый цвет. Для этого мы можем комбинировать селектор атрибута со смежным родственным селектором.
img[src$=".jpg"] + figcaption {
background-color: #a8b700;
}
Вышеприведенный отрезок кода будет выделять каждое изображение, атрибут источника которого заканчивается на .jpg, затем смежный селектор обнаружит следующий за ним элемент. В данном случае, figcaption будет добавлен с фоновым цветом #a8b700.
А здесь мы приводим коды для остальных форматов изображения: png и gif.
img[src$=".png"] + figcaption {
background-color: #389abe;
}
img[src$=".gif"] + figcaption {
background-color: #8960a7;
}
Теперь давайте проверим, что у нас получилось, перейдя по приведенной ниже ссылке.
* Демо
* Скачать исходный код
Источники изображения: MacPro 1, MacPro 2 и MacPro 3
В завершение
Надеемся, что вы уяснили суть оформления посредством специального селектора. Итак, в следующий раз когда вы будете разрабатывать стили для вашего HTML, мы настоятельно рекомендуем вам провести небольшое исследование на предмет наличия подходящих селекторов, и использовать их, вместо того чтобы добавлять классы или id.
В следующих статьях мы постараемся рассказать вам еще как минимум о двух новых селекторах, так что оставайтесь на связи!