Селектор атрибутів CSS3 Націлювання на тип файлу

Ця стаття є частиною нашої "Серія навчальних посібників HTML5 / CSS3" - присвячений допомозі зробити вас кращим дизайнером та / або розробником. Натисніть тут щоб побачити більше статей з тієї ж серії.

The селектори атрибутів це дійсно корисна функція для вибору елемента без додавання зайвого id або класи. Поки цільовий елемент має атрибут, подібний href, src і тип ми не повинні це робити.

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

І в цьому пості ми будемо використовувати один з синтаксисів для вибору тип файлу що вставляється як частина значення атрибута.

Підтримка синтаксису та браузера

The тип файлу завжди знаходиться в кінці імені файлу. Отже, щоб вибрати це тип файлу ми можемо використовувати наступний синтаксис [attr $ = "value"]. Цей синтаксис використовує $ = оператор, який орієнтує кінець значення атрибута, наприклад:

 a [href $ = ". pdf"]: до background: url ('… /images/document-pdf-text.png') не повторюється;  

У фрагменті вище буде позначено кожне посилання, на яке закінчується значення атрибута .pdf і вставте піктограму-документ-слово в : раніше псевдоелемент.

Джерело піктограм PDF: Фуга ікон

Хоча це звичайне використання цього селектора, ми, звичайно, можемо вийти за рамки цього.

Щодо сумісності браузера; хоча цей синтаксис офіційно введений як специфікація CSS3, він фактично підтримується Internet Explorer 7, так що ви можете спокійно застосовувати його через всі ваші проекти.

Приклад

Ви ніколи не дізнаєтеся, якщо ніколи не спробуєте. Нам просто потрібно спробувати щось нове, щоб краще зрозуміти те, чого ми ще не розуміємо. Отже, ми будемо демонструвати, як цей синтаксис може бути дуже корисним і зручним для націлювання на елемент у певній HTML-структурі, яка раніше була трохи важко застосувати, використовуючи лише звичайний CSS.

Нижче, ми маємо Структура HTML5 щоб додати до списку три зображення з його заголовком. Це призначено лише для демонстрації. Ваша розмітка не повинна бути точно такою, як наступний фрагмент (наприклад, у вас може бути лише одне зображення або ще три зображення), але справа в тому, що ви дізнаєтеся, як цей синтаксис можна застосувати певної структури HTML.

Кожне з перелічених вище зображень має такі формати або розширення, jpg, png, і gif. Вони також мають підпис, що представляє його розширення зображення; цей заголовок буде діяти як мітка зображення.

Отже, ось план, ми дамо різні кольори фону для підпису для кожного іншого розширення зображення. Зображення JPG отримає a зелений колір заголовка, PNG отримає синій, і нарешті подарунок отримає фіолетовий.

По-перше, давайте відносно позицію тега фігури, оскільки ми будемо застосовувати абсолютний положення підпису.

 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; позиція: абсолютна; зверху: 0; праворуч: 0; ширина: 50px; висота: 50px; висота рядка: 50px; text-align: center;  

Тепер настав час додати колір фону. Для цього ми можемо об'єднати селектор атрибутів з селектором сусідніх братів, +.

 img [src $ = ". jpg"] + figcaption колір тла: # a8b700;  

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

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

 img [src $ = ". png"] + напис background-color: # 389abe;  img [src $ = ". gif"] + figcaption background-color: # 8960a7;  

Тепер давайте подивимося, як це відбувається з демонстраційної посиланням нижче, або ж ви можете завантажити джерело, щоб переглянути його в автономному режимі.

• Демо
• Завантажити джерело

Джерела зображень такі: MacPro 1, MacPro 2 і MacPro 3

Висновок

Ми сподіваємося, що ви можете побачити елегантну сторону укладання за допомогою спеціального селектора, як те, що ми намагалися продемонструвати вище за допомогою селектора атрибутів. Таким чином, наступного разу, коли ви укладаєте HTML, ми рекомендуємо вам провести дослідження щодо того, чи можна застосувати ваш стиль, використовуючи спеціальний селектор, а не руйнувати правильно структуровану розмітку класи або id.

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