Селектор атрибутов очень удобен для выбора элементов без добавления излишних идентификаторов и классов. До тех пор, пока у элемента, к которому нужно обратиться, есть такие атрибуты, как href, src и type, нам не нужно добавлять лишнее. Селекторы атрибутов фактически присутствовали, начиная с 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, он фактически поддерживался начиная с браузера Internet Explorer 7, так что Вы можете спокойно применять его в своих разработках.

Пример 

Пока не попробуете, не узнаете. Нам просто нужно попробовать новое, чтобы понять то, что мы еще не поняли. Так что дальше мы покажем, как этот синтаксис может быть полезен, чтобы обращаться к элементу в определенной структуре HTML, которая несколько сложна для воплощения на чистом CSS.

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

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);
}

И затем мы зададим значения по умолчанию для стиля и расположения подписей. Подпись изображения или метка будет квадратом со сторонами 50px.

img + figcaption {
    color: #fff;
    position: absolute;
    top: 0;
    rightright: 0;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

Теперь пришло время добавить цвет фона. Чтобы сделать это, нам нужно применить вместе селектор атрибутов и селектор смежных элементов, +.

img[src$=".jpg"] + figcaption {
    background-color: #a8b700;
}

Фрагмент кода выше обратится к каждому изображению, значение атрибута src которого заканчивается на .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

Заключение 

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

Автор урока Thoriq Firdaus

Автор подборки — Дежурка

Смотрите также:

• Создание эффекта для ссылок с использованием CSS
• Интересный эффект кругового движения с использованием jQuery
• Создание эффектов загрузки страницы