Использование селектора атрибута
14 августа 2017 | Опубликовано в css | Нет комментариев »
Селекторы атрибутов — еще одна область CSS, которая исторически недооценивается и недостаточно используется, частично из-за отсутствия поддержки в ранних версиях браузера Internet Explorer. Хотя селекторы, о которым мы расскажем в этом уроке, поддерживаются во всех современных и многих устаревших версиях браузеров, включая браузер Internet Explorer от версии 7.
Селекторы атрибутов — это простая форма записи регулярных выражений в коде CSS и один из инструментов, которые можно использовать для упрощения записи разметки, что всегда полезно, так как в общем случае чем сильнее можно сократить код HTML и код CSS, тем легче их создавать и поддерживать, и тем более цельным будет выглядеть сайт.
Простой селектор атрибута
abbr[title] { color: black; }
Соответствует следующей записи в коде HTML:
<abbr title="International Business Machines">IBM
Стили задаются всем элементам аббревиатур, у которых есть атрибут название.
input[required] { background: white; }
Соответствует следующей записи в коде HTML:
<input type="number" required>
Стили задаются всем элементам поля ввода, у которых есть указанный атрибут, не зависимо от значения атрибута. Этот селектор не кажется особо полезным, так как большинство элементов содержат одни и те же атрибуты. Следующий атрибут интересней:
Селектор атрибута точного значения
input[type="submit"] { color: orange; }
Соответствует следующей записи в коде HTML:
<input type="submit">
Обратите внимание на отсутствие пробелов в записи селектора. Этот атрибут среди прочего очень полезен для задания стилей элементам форм. Но для его использования нужно знать точное значение атрибута. Это не относится к следующим селекторам.
Селектор атрибута отдельного слова значения
img[alt~=Zealand] { border: 3px solid green; }
Соответствует следующей записи в коде HTML:
<img alt="New Zealand" … >
В то время как селектор атрибута точного значения задает свойства только элементам, у которых значение точно совпадает с указанным, селектор атрибута отдельного слова значения выберет элементы, у которых одно из слов, отделенных пробелами, соответствует заданному.
В спецификации CSS3 добавилось еще три варианта селекторов атрибута:
Селектор атрибута начала значения
a[href^="/al"]
Соответствует следующей записи в коде HTML:
<a href="/all-about-attribute-selectors">
Стили задаются всем элементам ссылок, у которых адрес начинается с указанных символов.
Селектор атрибута конца значения
p[class$="ed"]
Соответствует следующей записи в коде HTML:
<p class="educated">
Еще соответствует и такой записи в коде HTML:
<p class="reed">
Селектор атрибута части значения
a[class*="on"]
Соответствует следующей записи в коде HTML:
<a class="bonobo">
Чувствительность к регистру
В спецификации селекторов CSS 4 уровня добавился признак нечувствительности к регистру:
input[type="submit" i]
Он соответствует следующим записям в коде HTML:
<input type="SUBMIT">, <input type="submit">
и любым другим сочетаниям.
Но эта возможность поддерживается только современными версиями некоторых браузеров, многие мобильные браузеры и все версии браузеров Internet Explorer и Edge не делают разницы между строчными и прописными буквами для значений атрибутов и могут быть введены в заблуждение признаком нечувствительности к регистру, так что пока мы не советуем его использовать.
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
549
- Насколько важно сегодня использовать Web Safe цвета?
538
- 20 наборов кистей для Фотошопа, которые вам пригодятся
530
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191