Селекторы атрибутов. Css селекторы атрибутов Атрибуты css3
Влад Мержевич
Многие теги различаются по своему действию в зависимости от того, какие в них используются атрибуты. Например, тег может создавать кнопку, текстовое поле и другие элементы формы всего лишь за счёт изменения значения атрибута type . При этом добавление правил стиля к селектору INPUT применит стиль одновременно ко всем созданным с помощью этого тега элементам. Чтобы гибко управлять стилем подобных элементов, в CSS введены селекторы атрибутов. Они позволяют установить стиль по присутствию определённого атрибута тега или его значения.
Рассмотрим несколько типичных вариантов применения таких селекторов.
Простой селектор атрибута
Устанавливает стиль для элемента, если задан специфичный атрибут тега. Его значение в данном случае не важно. Синтаксис применения такого селектора следующий.
[атрибут] { Описание правил стиля }
Селектор[атрибут] { Описание правил стиля }
Стиль применяется к тем тегам, внутри которых добавлен указанный атрибут. Пробел между именем селектора и квадратными скобками не допускается.
В примере 13.1 показано изменение стиля тега
,
в том случае, если к нему добавлен атрибут title
.
Пример 13.1. Вид элемента в зависимости от его атрибута
HTML5 CSS 2.1 IE Cr Op Sa Fx
Продолжая известный закон Мерфи, который гласит: Если неприятность
может случиться, то она обязательно случится
, можем ввести свое наблюдение:
После того, как веб-страница
будет корректно отображаться в одном браузере, выяснится,
что она неправильно показывается в другом
.
Результат примера показан на рис. 13.1.
Рис. 13.1. Изменение стиля элемента в зависимости от применения атрибута title
В данном примере меняется цвет текста внутри контейнера
,
когда к нему добавляется title
. Обратите
внимание, что для селектора Q
нет нужды повторять стилевые
свойства, поскольку они наследуются от селектора Q
.
Атрибут со значением
Устанавливает стиль для элемента в том случае, если задано определённое значение специфичного атрибута. Синтаксис применения следующий.
[атрибут="значение"] { Описание правил стиля }
Селектор[атрибут="значение"] { Описание правил стиля }
В первом случае стиль применяется ко всем тегам, которые содержат указанное значение. А во втором — только к определённым селекторам.
В примере 13.2 показано изменение стиля ссылки в том случае, если тег содержит атрибут target со значением _blank . При этом ссылка будет открываться в новом окне и чтобы показать это, с помощью стилей добавляем небольшой рисунок перед текстом ссылки.
Пример 13.2. Стиль для открытия ссылок в новом окне
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат примера показан ниже (рис. 13.2).
Рис. 13.2. Изменение стиля элемента в зависимости от значения target
В данном примере рисунок к ссылке добавляется с помощью свойства background . В его функции входит создание повторяющейся фоновой картинки, но повторение фона можно отменить через значение no-repeat , что в итоге даст единственное изображение.
Значение атрибута начинается с определённого текста
Устанавливает стиль для элемента в том случае, если значение атрибута тега начинается с указанного текста. Синтаксис применения следующий.
[атрибут^="значение"] { Описание правил стиля }
Селектор[атрибут^="значение"] { Описание правил стиля }
В первом случае стиль применяется ко всем элементам, у которых значение атрибута начинаются с указанного текста. А во втором — только к определённым селекторам. Использование кавычек не обязательно, но только если значение содержит латинские буквы и без пробелов.
Предположим, что на сайте требуется разделить стиль обычных и внешних ссылок — ссылки, которые ведут на другие сайты. Чтобы не вводить в тег новый класс, воспользуемся селекторами атрибутов. Внешние ссылки характеризуются добавлением к адресу протокола, например, для доступа к гипертекстовым документам используется протокол HTTP. Поэтому внешние ссылки начинаются с ключевого слова http:// , его и добавляем к селектору A , как показано в примере 13.3.
HTML5 CSS 2.1 IE Cr Op Sa Fx
Рис. 13.3. Изменение стиля для внешних ссылок
Значение атрибута оканчивается определённым текстом
Устанавливает стиль для элемента в том случае, если значение атрибута оканчивается указанным текстом. Синтаксис применения следующий.
[атрибут$="значение"] { Описание правил стиля }
Селектор[атрибут$="значение"] { Описание правил стиля }
В первом случае стиль применяется ко всем элементам у которых значение атрибута завершается заданным текстом. А во втором — только к определённым селекторам.
Таким способом можно автоматически разделять стиль для ссылок на сайты домена ru и для ссылок на сайты других доменов вроде com, как показано в примере 13.4.
Пример 13.4. Стиль для разных доменов
HTML5 CSS 2.1 IE Cr Op Sa Fx
Yandex.Com | Yandex.Ru
В данном примере содержатся две ссылки, ведущие на разные домены — com и ru. При этом к каждой такой ссылке с помощью стилей добавляется своя фоновая картинка (рис. 13.4). Стилевые свойства будут применяться только для тех ссылок, атрибут href которых оканчивается на «.ru» или «.com». Заметьте, что добавив к имени домена слэш (http://www.yandex.ru/) или адрес страницы (http://www.yandex.ru/fun.html), мы изменим тем самым окончание и стиль применяться уже не будет. В этом случае лучше воспользоваться селектором, у которого заданный текст встречается в любом месте значения атрибута.
Значение атрибута содержит указанный текст
Возможны варианты, когда стиль следует применить к тегу с определённым атрибутом, при этом частью его значения является некоторый текст. При этом точно не известно, в каком месте значения включен данный текст — в начале, середине или конце. В подобном случае следует использовать такой синтаксис.
[атрибут*="значение"] { Описание правил стиля }
Селектор[атрибут*="значение"] { Описание правил стиля }
В примере 13.5 показано изменение стиля ссылок, в атрибуте href которых встречается слово «htmlbook».
Пример 13.5. Стиль для разных сайтов
HTML5 CSS 2.1 IE Cr Op Sa Fx
Шаг за шагом | Графика для Веб
Результат данного примера показан на рис. 13.5.
Рис. 13.5. Изменение стиля для ссылок, в адресе которых встречается «htmlbook»
Одно из нескольких значений атрибута
Некоторые значения атрибутов могут перечисляться через пробел, например имена классов. Чтобы задать стиль при наличии в списке требуемого значения применяется следующий синтаксис.
[атрибут~="значение"] { Описание правил стиля }
Селектор[атрибут~="значение"] { Описание правил стиля }
Стиль применяется в том случае, если у атрибута имеется указанное значение или оно входит в список значений, разделяемых пробелом (пример 13.6).
Пример 13.6. Стиль в зависимости от имени класса
HTML5 CSS 2.1 IE Cr Op Sa 5 Fx
Заголовок
В данном примере зелёный цвет текста применяется к селектору H3 , если имя класса у слоя задано как block . Отметим, что аналогичный результат можно получить, если использовать конструкцию *= вместо ~= .
Дефис в значении атрибута
В именах идентификаторов и классов разрешено использовать символ дефиса (-), что позволяет создавать значащие значения атрибутов id и class . Для изменения стиля элементов, в значении которых применяется дефис, следует воспользоваться следующим синтаксисом.
[атрибут|="значение"] { Описание правил стиля }
Селектор[атрибут|="значение"] { Описание правил стиля }
Стиль применяется к элементам, у которых атрибут начинается с указанного значения или с фрагмента значения, после которого идёт дефис (пример 13.7).
Пример 13.7. Дефисы в значениях
HTML5 CSS 2.1 IE Cr Op Sa Fx
В данном примере имя класса задано как block-menu-therm , поэтому в стилях используется конструкция |="block" , поскольку значение начинается именно с этого слова и в значении встречаются дефисы.
Все перечисленные методы можно комбинировать между собой, определяя стиль для элементов, которые содержат два и более атрибута. В подобных случаях квадратные скобки идут подряд.
[атрибут1="значение1"][атрибут2="значение2"] { Описание правил стиля }
Селектор[атрибут1="значение1"][атрибут2="значение2"] { Описание правил стиля }
Вопросы для проверки
1. Необходимо задать цвет фона у текстового поля. Какой стиль для этой цели подойдет?
- INPUT { background: #acdacc; }
- INPUT { background: #acdacc; }
- INPUT { background: #acdacc; }
- INPUT { background: #acdacc; }
- INPUT { background: #acdacc; }
2. Какой стиль необходимо использовать, чтобы изменить цвет текста только у второго абзаца?
Первый абзац
Второй абзац
Третий абзац
- P { color: red; }
- P { color: red; }
- P { color: red; }
- P { color: red; }
- P { color: red; }
3. К какому элементу будет применяться следующий стиль?
{ background: #666; }
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Ответы
1. INPUT { background: #acdacc; }
2. P { color: red; }
3.
- Выполняемая задача - выбор всех элементов по наличию или значению заданного атрибута.
- Обозначение - запись, определяющая тип селектора в квадратных скобках.
Важно! 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 { /* какие-то стили */ }
Это тоже главная Ошибка в адресе!
Группировка
Для любых, из перечисленных выше селекторов можно сделать выбор сразу по нескольким атрибутам. Например:
Img { /* эти стили применятся только к изображениям, у которых есть все три перечисленных атрибута */ } a { /* эти стили применятся только к ссылкам, в адресах которых есть подстрока "сайт" и для которых задан атрибут title */ }
Область применения
Перечисленные выше селекторы атрибутов (включая CSS3) поддерживаются всеми популярными браузерами. Единственное исключение — IE6.
Конечно, применять на веб-странице атрибуты, задающие оформление — это, буквально, технология прошлого тысячелетия (так верстали в начале 90-х). Сейчас вместо таких атрибутов пользуются соответствующими CSS-свойствами. Тем не менее, целый ряд атрибутов вполне заслужил свое место в твоем HTML. А некоторые из них просто являются обязательными (познакомиться подробнее с ). В этом случае, использование селектора атрибутов позволяет обойтись без лишних классов и, таким образом, упростить HTML-код.
Селекторы атрибутов - это селекторы, которые позволяют применить стили к любым HTML-элементам имеющим определенный атрибут или определенное значение атрибута. Существует много способов их применения, но, несмотря на такую гибкость, на практике селекторы атрибутов довольно редко используются, так как есть более удобные селекторы. Хотя, с другой стороны, иногда они очень помогают.
Да, и как обычно говорю вам - не вздумайте все, что написано ниже, заучивать наизусть, если с головой дружите. :) Из этого урока вам надо запомнить одно - то, что написано в первом параграфе. В остальном надо просто разобраться и понять. Итак.
Синтаксис селекторов атрибутов
Для применения стилей к элементам с определенным атрибутом, необходимо в квадратных скобках, , указать данный атрибут.
[атрибут] { свойство: значение; ... }
Чтобы стили применились к элементам имеющим не просто определенный атрибут, а атрибут с конкретным значением - надо после атрибута написать знак равно (=) и это значение, которое можно взять в кавычки.
[атрибут="значение"] { свойство: значение; ... }
Некоторые атрибуты могут иметь сразу несколько разделенных пробелом значений (например, атрибут rel тега или class , который мы рассмотрим чуть позже). Так вот, чтобы задать стили элементам, у которых одно из значений в атрибутах одинаковое, надо после атрибута поставить знаки ~= (приблизительно равно), а затем написать необходимое значение.
[атрибут~="значение"] { свойство: значение; ... }
Четвертый вариант предназначен для атрибутов, у которых значение может состоять из нескольких слов разделенных дефисом (допустим, то же class ). И он позволяет применить стили ко всем элементам, у которых первое слово в значении атрибутов - одинаковое. Например, class= "block-left" и class= "block-right" . Здесь одинаковая часть - block , поэтому ее и можно использовать в качестве значения.
[атрибут|="значение"] { свойство: значение; ... }
Пятый способ подключает стили к элементам, у которых значения атрибутов начинаются с одинакового текста. Например, src= "images/bird.png" и src= "images/cat.jpg" . Здесь одинаковая часть images/ или images или image и т.д. Именно эта одинаковая часть и записывается в качестве значения.
[атрибут^="значение"] { свойство: значение; ... }
Аналогичен пятому, но здесь выборка идет по части текста, которым наоборот заканчиваются значения атрибутов. Допустим, src= "image/bird.png" и src= "picture/dog.png" . Понятно, что здесь одинаковая часть .png .
[атрибут$="значение"] { свойство: значение; ... }
Если необходимо выделить элементы, у которых значения атрибутов имеют одинаковую часть текста, причем неважно в каком месте значения, то используется данный способ. Например, href= "http://сайт/css/" и href= "http://www.сайт/html/" . Здесь одинаковая часть "сайт" . Таким образом, допустим, можно выделить все ссылки ведущие на определенный сайт.
[атрибут*="значение"] { свойство: значение; ... }
К сожалению, Internet Explorer 6.0 вообще не понимает селекторы атрибутов.
Пример использования селекторов атрибутов в CSS
Результат в браузере
В CSS очень много селекторов. Некоторые из них позволяют выбрать определенные элементы, не привязывая к ним стилевой класс или идентификатор. Например, css селекторы атрибутов.
Как выбрать элемент по его html-атрибуту
Селекторы атрибутов, это те селекторы, в которых в квадратных скобках записывается атрибут, либо атрибут со значением. Сразу приведу несколько примеров, чтобы было понятно:
* – выбирает все элементы, которые имеют атрибут href с любым значением.
input – выбирает все input-элементы, у которых есть атрибут disable (все отключенные поля).
input – выбирает все поля, тип которых password , то есть поля для ввода пароля.
img – выбирает картинку, у которой задан атрибут src = “logo.png” .
Как видите, прописывать css селекторы атрибутов не так уж и сложно. Их самое главное отличие – квадратные скобки, в которых записывается либо просто атрибут, либо атрибут с его точным значением. Но на этом функционал этих селекторов не заканчивается.
Продвинутые css селекторы атрибутов
Все нижеперечисленные селекторы чувствительны к регистру.
Поиск в начале строки
div – выбирает все div-ы, у которых есть стилевой класс, начинающийся на “block” . Таким образом, будут выбраны, например, такие блоки: “block-head”, “block-3”, “blocknote” . Главное, чтобы в начале значения было ключевое слово.
Поиск в конце строки
A – выбирает все ссылки, у которых адрес заканчивается на.rar . Таким образом, если у вас на сайте можно что-то скачать, то вы можете добавить иконку рядом со всеми ссылками на архивные файлы.
Поиск подстроки везде в значении
span – выберет все теги span, у которых в имени класса в любом месте этого имени содержится “art”. Таким образом, будут выбраны, например, спаны с такими классами: party, clart, art-1.
Поиск префиксов
p – выберет абзацы со стилевым классом, которые имеют имя, либо точно совпадающее с “first”, либо содержащие префикс first- , с которого начинается имя класса.
Поиск слов внутри значения
input
– выберет все элементы input, в которых значение атрибута идентификатора содержит в себе слово text . Его отличие от поиска подстроки везде отличается тем, что входить должно именно слово, а не подстрока.
Последние два варианта редко где применяются и едва ли вам часто пригодятся, но для общего развития все-таки можно о них знать.
Для чего могут пригодиться селекторы атрибутов
С помощью подобных селекторов можно выбирать многие html-элемента, не задавая им стилевых классов. В некоторых случаях благодаря такому способу можно сократить код и упростить себе работу. Например, выше я приводил пример с иконкой для архивов. Тут появилась еще одна идея. Например, на своем сайте вы часто ссылаетесь на один другой ресурс (википедию, скажем) и хотите рядом с ссылками на википедию отображать специальную иконку, которой у других ссылок быть не должно.
Реализовать это можно так:
A {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 от лишних классов и идентификаторов.
-
Сергей Савенков