Что такое селекторы атрибуты css. Css селекторы атрибутов. Значение атрибута содержит указанный текст
Селекторы CSS являются значимым ингредиентом при разработке веб сайта. Они привязывают код CSS к разметке HTML. Сколько различных шаблонов селекторов вы регулярно используете?
Скорее всего, немного. Обычно список ограничивается простыми селекторами элементов HTML, классов и идентификаторов. Но возможных селекторов значительно больше.
В этом и последующем уроках будет представлено 42 варианта селекторов, которые могут существенно улучшить ваш код.
В данной серии уроков мы рассмотрим следующие типы селекторов:
- Селекторы атрибутов — используем атрибуты HTML для выбора элементов.
- Комбинаторы — комбинирование селекторов для более точного указания элементов.
- Псевдо классы — элементы, которые мы можем использовать при определенных условиях.
Комбинаторы и псевдо классы будут рассмотрены в последующих уроках серии.
Для начала взглянем на простые селекторы.
Примечание: в скобках указана версия CSS, в которой появился селектор.
Простые селекторыПростые селекторы включают селектор типа, универсальный селектор, селектор атрибута, селектор класса, селектор идентификатора и псевдо класс (псевдо класс будет рассмотрен в следующем уроке
Селектор типа (1) E (соответствует любому элементу типа E ) — Мы можем использовать любой элемент HTML в селекторе.
Универсальный селектор (2) * (соответствует любому элементу) — Если есть стиль, который нужно использовать для всех элементов на странице, то используем данный селектор.
Селектор класса (1) .class (соответствует элементу с классом class) — любой набор стилей, который можно использовать для любых элементов, обладающих определенным классом.
Селектор идентификатора (1) #myid (соответствует элементу с идентификатором myid) — любой набор стилей, который используется только для одного элемента с определенным идентификатором.
Скорее всего, вы используете простые селекторы в своей работе, и они не нуждаются в подробном описании. Давайте рассмотрим селекторы атрибутов, которые могут быть вам мало знакомы по причине редкого использования.
Селекторы атрибутовСелекторы атрибутов были введены в CSS2 и расширены в CSS3.
E (2) — соответствует элементу E с атрибутом “foo”.
E (2) — соответствует элементу E, атрибут которого “foo” имеет значение “bar”.
A { color: green }
E (2) — соответствует элементу E, который имеет атрибут “foo” со значением в виде списка, разделенного пробелом, и одним значением соответствующим “bar".
A {color: green}
E (3) — соответствует элементу E, который имеет атрибут “foo” со значением, начинающимся со строки “bar”.
A {color: green}
E (3) — соответствует элементу E, который имеет атрибут “foo” со значением, заканчивающимся строкой “bar".
A {color: green}
Вторая ссылка будет иметь зеленый цвет, так как значение атрибута href заканчивается строкой "php" . Данный селектор может быть отличным средством для выделения ссылок с определёнными типами файлов.
E (3) — соответствует элементу E, который имеет атрибут “foo” со значением, содержащим строку “bar”.
A {color: green}
E (3) — соответствует элементу E, атрибут которого “foo” имеет значение в виде списка, разделенного тире и начинающегося (слева направо) с “en”.
A {color: green}
Множественный селектор атрибутовМожно объединять несколько селекторов атрибутов вместе:
A {color: green}
Приведенный в примере селектор соответствует первой ссылке, так как только у нее есть в списке значений атрибута обе указанных строки.
Атрибуты или классы и идентификаторы?Каково же преимущество использования атрибутов перед классами и идентификаторами?
Если добавлять атрибут специально для использования селектора, то преимуществ нет.
Но многие элементы разметки HTML имеют атрибуты для других целей. href и очень часто - атрибут title . Изображения всегда имеют атрибут alt . Элементы формы используют атрибут type . В коде HTML задействовано большое количество атрибутов. Почему бы не использовать преимущества селекторов атрибутов для них?
Кроме того, HTML5 имеет новый атрибут - data , который также может нести двойную нагрузку.
Селекторы атрибутов могут избавить код HTML от лишних классов и идентификаторов.
Практически все верстальщики знают о существовании селекторов атрибутов css и хоть раз да встречали у себя в коде конструкции из разряда input, но лишь избранные единицы знают, что на самом деле их существует 7 разновидностей, каждая из которых открывает достаточно широкие возможности по отбору тегов из кода нашей страницы.
Описание селектора атрибутов CSSОсновная цель – отбор тегов из html кода страницы по определенному атрибуту, группе атрибутов или их значению.
Синтаксис – квадратные скобки внутри которых находится название атрибута.
Классификация и использование селекторов атрибутов По наличию атрибута[ title] { text- decoration: underline; }
Позволяет отобрать все элементы у которых задан атрибут с определенным названием. В нашем примере все теги у которых прописан title станут подчеркнутыми.
По точному значению атрибутаinput[ type= "submit" ] { background- color: green; }
Пожалуй наиболее часто встречающаяся разновидность данного атрибута. Задает точное соответствие. Будут выбраны только те input, у которых атрибут type задан submit.
По частичному значению атрибутаp[ class ~= "useful" ] { color: red; }
Позволяет отобрать элементы, среди заданных значений которых присутствует наше. Для лучшего понимания поясню на примере: все p у которых среди заданных классов встречается useful попадут под данный селектор. (“useful superText”- попадет, “useful”- попадет, “superText”- не попадет).
Селектор классов по сути является частным случаем данного селектора атрибутов.
По конкретным значениям атрибутов[ lang|= "en" ] { font- style: italic; }
Отбор по атрибуту значение которого равно значению селектора или же содержит в себе данное значение с идущим после него дефисом.
Чтобы лучше понять скажу, что в примере элементы с lang="en", lang="en-us", lang="en-au" будут выбранны, а с lang="ru", lang="english" нет.
По началу значения атрибута[ alt^= "pony" ] { margin- bottom: 20px; }
Отберет атрибуты значение которых начинается с заданного нами. Пояснения: alt=”ponyLand”, alt=”pony can fly”, alt=”pony” – будут выбраны, alt=”I want pony” – не будет выбрано.
По окончанию значения атрибутаВ целом принцип действия аналогичен предыдущему атрибуту, но на этот раз значение должно быть в конце атрибута.
img[ src$= ".png" ] { width: 150px; }
В примере будут выбраны все изображения, ссылающиеся на файлы.png.
По подстроке в значении атрибутаЛогичным после двух предыдущих будет селектор, который выбирает элементы в которых встречается интересное нам значение вне зависимости от его расположения внутри атрибута.
a[ href*= "сайт" ] { font- size: 120 %; }
Выберутся все элементы включающие в себя интересную нам подстроку..ru” уже нет. из 5 )
- Выполняемая задача - выбор всех элементов по наличию или значению заданного атрибута.
- Обозначение - запись, определяющая тип селектора в квадратных скобках.
Важно! IE6 не понимает этот селектор.
Подробнее про селектор атрибутов Выбор по наличию атрибутаВыбираем все элементы, у которых существует (задан в HTML) данный атрибут.
Синтаксис:
Element
Тут и далее Element , это какой-либо простой селектор (div , p , .header , div#popup , * и т.д.). Отсутствие в коде Element обозначает, что в этом месте стоит , который, в этой ситуации можно опустить.
Пример. Выделим жирным шрифтом все элементы, для которых задана всплывающая подсказка:
{ font-weight: bold; }
Выбор по точному значению атрибутаВыбираем все элементы, заданный атрибут которых имеет точное совпадение значения.
Синтаксис:
Element
Пример. Зададим цвет фона только для тех , значение атрибута которых в точности равно "submit" (для кнопки отправки формы):
Input { background: #0f0; }
Выбор по частичному значению атрибута
Выбираем все элементы, заданный атрибут которых в перечне значений имеет определенное слово.
Синтаксис:
Element
Пример. Зададим обтекание для тех элементов , в перечне значений атрибута , которых присутствует "sideBar" (вот это-то и есть, фактически, ):
Div { float: left; }
Выбор по конкретным значениям атрибутов
Выбираем все элементы, заданный атрибут которых равен определенному значению или начинается с этого значения, после которого идет дефис.
Синтаксис:
Element
Пример. Зададим стили для всех элементов, язык которых задан в атрибутах, как английский (en, en-us, en-gb, en-au и т.д.):
{ /* какие-то стили */ }
Новые селекторы атрибутов в CSS3
CSS3 несколько расширяет возможности выбора по конкретным значениям атрибутов и дополняет их еще тремя вариантами.
Выбор по началу значения атрибутаВыбираем все элементы, заданный атрибут которых начинается с определенного значения.
Синтаксис:
Element
Пример. Зададим стили для всех элементов, атрибут которых начинается со слова "Hint":
{ /* какие-то стили */ }
Выбор по окончанию значения атрибута
Выбираем все элементы, заданный атрибут которых оканчивается на определенное значение.
Синтаксис:
Element
Пример. Зададим стили для всех элементов , которые ссылаются на гифки:
Img { /* какие-то стили */ }
Выбираем все элементы, заданный атрибут которых содержит определенную подстроку.
Синтаксис:
Element
Пример. Зададим стили для всех ссылок, в адресах которых есть подстрока "сайт":
A { /* какие-то стили */ }
Это тоже главная
