Селектор атрибутов CSS3, нацеленный на тип файла

Эта статья является частью нашей «Серия руководств по HTML5 / CSS3» - призван помочь вам стать лучшим дизайнером и / или разработчиком. кликните сюда чтобы увидеть больше статей из этой серии.

селекторы атрибутов действительно полезная функция для выбора элемента без добавления лишнего Я бы или же классы. Пока целевой элемент имеет такой атрибут, как HREF, ЦСИ а также тип мы не должны делать это.

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

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

Поддержка синтаксиса и браузера

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

 a [href $ = ". pdf"]: перед background: url ('… /images/document-pdf-text.png') no-repeat;  

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

PDF Icon Source: Фуга Иконки

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

Что касается совместимости браузера; хотя этот синтаксис официально представлен как спецификация CSS3, на самом деле он поддерживается Internet Explorer 7, так что вы можете смело применять его во всех ваших проектах.

Пример

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

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

Каждое из изображений, перечисленных выше, имеет следующие форматы или расширения, JPG, PNG, а также GIF. У них также есть заголовок, который представляет его расширение изображения; эта подпись будет выступать в качестве метки изображения.

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

Во-первых, давайте установим позицию тега figure относительно, потому что мы собираемся применить абсолютный положение для подписи.

 фигура позиция: относительная;  

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

 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; положение: абсолютное; верх: 0; справа: 0; ширина: 50 пикселей; высота: 50 пикселей; высота строки: 50 пикселей; выравнивание текста: по центру;  

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

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

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