—»     —»   Селектор атрибутов CSS3: указываем тип файла
  Раздел: CSS/Style Sheets   Нет комментариев  

Селектор атрибутов CSS3: указываем тип файла

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

Селекторы атрибутов были доступные еще с выхода CSS 2.1, и на сегодняшний день в спецификацию CSS3 были добавлены новые типы, и теперь мы можем даже более конкретно указывать атрибуты элемента.

Селектор атрибутов CSS3: указываем тип файла

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

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

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

a[href$=".pdf"]:before {
background: url('../images/document-pdf-text.png') no-repeat;
}

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

Селектор атрибутов CSS3: указываем тип файла

Источник иконки 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;
}

Теперь давайте проверим, что у нас получилось, перейдя по приведенной ниже ссылке.

* Демо
* Скачать исходный код

Селектор атрибутов CSS3: указываем тип файла

Источники изображения: MacPro 1, MacPro 2 и MacPro 3

В завершение

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

В следующих статьях мы постараемся рассказать вам еще как минимум о двух новых селекторах, так что оставайтесь на связи!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, файлы
Опубликовал Design FactoRy   Прочитано (раз): 6627   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031