Тонкости использования селекторов аттрибутов в CSS

Этот один элемент имеет три аттрибута: ID, class и rel. Для выбора элемента в CSS вы можете использовать селектор ID (#first-title) и селектор class (.magical). Но знаете ли вы, что можно использовать для выбора атрибут rel? Это так называемый селектор атрибута:

h2[rel=friend] /* woohoo! */
>

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

[rel = external] — Точное совпадение значения атрибута

В примере выше, мы использовали атрибут со значением «friend» у элемента h2. CSS селектор, который мы написали, нацелен на элемент h2, потому что его атрибут rel имеет значение «friend». Другими словами, знак равенства означает точное соответствие. Рассмотрим другие примеры.

< h1 rel ="external" >Attribute Equals

h1[rel=external]

Более реальный пример из жизни — это стилизация списка блогов. Например у вас есть список ссылок на сайты друзей:

< a href ="http://perishablepress.com" >Jeff Starr
< a href ="http://davidwalsh.name" >David Walsh
< a href ="http://accidentalninja.net/" >Richard Felix

Вы хотите сделать различные стили для каждой из ссылок. Традиционный способ — задать каждой ссылке имя класса, но это требует дополнительной разметки, что не всегда хорошо (для семантики и прочего). Другой способ — это использование :nth-child, но для этого потребуется неизменный порядок списка. В данном случае идеальным решением будет использование селекторов атрибутов… Ссылки уже имеют уникальные атрибуты.

a[href=http://perishablepress.com]

Я думаю, что чаще всего селекторы атрибутов используют для элементов input. Это text, button, checkbox, file, hidden, image, password, radio, reset и submit. Все они являются элементом и все они очень разные. Так что делать, что то вроди input , почти всегда плохая идея. Поэтому очень часто можно увидеть, нечто похожее на это:

input[type=text] < padding: 3px; >
input[type=radio]

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

[rel *= external] — Атрибут содержит некоторое значение в любом месте

Именно здесь становится более интересно. Знаку равенства в селекторе атрибута могут предшествовать другие символы изменяющие значение. Например, «* black»> < h1 rel ="xxxexternalxxx" >Attribute Contains

h1[rel*=external]

Помните, что классы и ID тоже являются атрибутами, и могут быть использованы селектором атрибута. Допустим вы пишете CSS для сайта в котором вы не можете контролировать разметку и разработчики сделали три дива:

Вы можете выбрать их все:

[rel ^= external] — Атрибут начинается с определенного значения

< h1 rel ="external-link yep" >Attribute Begins

h1[rel^=external]

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

a[href^=http://perishablepress.com]

Это будет соответствовать ссылке на главную и второстепенные страницы.

[rel $= external] — Атрибут оканчивается определенным значением

Мы можем выбирать основываясь на начальном значении атрибута, почему бы не выбирать с конечного?

< h1 rel ="friend external" >Attribute Ends

h1[rel$=external]

Честно говоря, я изо всех сил пытаюсь найти реальный пример использования этого. К примеру вы можете найти ссылки имеющие в конце определенные символы.

a[href$=#], a[href$=?]

[rel ~= external] — Атрибут содержит значение в списке разделенном пробелами

Вы наверняка знаете, что к элементу можно применять несколько классов. Если вы это сделаете, вы можете использовать .class-name в CSS для связи. В селекторе атрибута не все так просто. Если ваш атрибут имеет несколько значений (например список разделенный пробелами) вам прийдется использовать «~ black»> < h1 rel ="friend external sandwich" >Attribute Space Separated

h1[rel~=external]

Вы можете подумать, зачем это использовать, когда «* home friend-link» , другой rel=»home friend link» . Вам понадобится селектор разделенный пробелами для связи с вторым элементом.

[rel |= external] — Атрибут содержит значение в списке разделенном тире

Список разделенный тире очень похож на список разделенный пробелами, и его так же используют для более строгого соблюдения правил, чем при использовании *=.

< h1 rel ="friend-external-sandwich" >Attribute Dash Separated

h1[rel|=external]

[title = one][rel ^= external] — Совпадение нескольких атрибутов

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

< h1 rel ="handsome" title ="Important note" >Multiple Attributes

h1[rel=handsome][title^=Important]

Поддержка браузерами

Каждый приведенный выше пример работает во всех современных браузерах: Safari, Chrome, Firefox, Opera и IE. Internet Explorer обладает превосходной поддержкой всего этого в 7 версии и нулевой поддержкой в 6 версии. Что бы протестировать в браузере — откройте тестовую страницу. Если строка/селектор красная — значит селектор работает.

• css
• селекторы атрибутов
• attribute selectors

Какие из css селекторов являются селекторами по атрибуту id html элемента

В CSS существует возможность обратиться к элементам html-документа по значению его атрибутов. Вы, конечно, уже знаете про ID и классы. Давайте взглянем на следующий html:

David Walsh

У этого элемента три атрибута: id, class и rel. Обратиться к этому элементу в CSS вы можете либо по его идентификатору (#first-title), либо по имени класса (.magical). Однако знали ли вы, что вы также можете обратиться к нему, используя атрибут rel? Это и называется селекторы по атрибутам:

h2[rel=friend] < /* woohoo! */ >

Существует множество вариантов их использования. Давайте разберёмся более детально с различными опциями и попытаемся придумать сценарии использования атрибутов в реальной жизни.

[rel = external]
Атрибут точно соответствует заданному значению

В приведённом выше примере, атрибут элемента h2 был равен «friend». Селектор, который мы написали ссылался на него, поскольку значение атрибута точно равно «friend». Именно точное. Давайте посмотрим на другой пример:

Attribute Equals

h1[rel=external]

Более реальный пример — стилизация блогролла (blogroll). Скажем у вас есть список ссылок на дружественные сайты:

Jeff Starr David Walsh Richard Felix

И вы хотите задать каждой ссылке свой стиль. Традиционный подход состоит в том, что каждой ссылке указывается класс, но этот подход требует дополнительной разметки. Другой способ — это использование псевдоселектора nth-child. Однако этот подход требует определённого порядка элементов. Эта проблема идеально подходит для применения селекторов по атрибутам, поскольку ссылки уже являются уникальными.

a[href=http://perishablepress.com]

Я уверен, что наиболее часто этот тип селектора используется для элементов input (text, radio и т.п.). Все эти элементы сильно отличаются друг от друга, и писать что-нибудь типа input в большинстве случаев не лучшая идея. Гораздо чаще используется следующая запись:

input[type=text] < padding: 3px; >input[type=radio]

Это единственный способ стилизовать элементы input без дополнительной разметки и всяческих ухищрений.

[rel *= external]
Атрибут содержит заданное значение.

Теперь начинаются более интересные вещи. Знаку равенства в селекторе по атрибуту может предшествовать другой знак, который меняет назначение его использования. Например, «*=» означает «заданное значение может находиться где угодно в значении указанного атрибута». Взгляните на следующий пример:

Attribute Contains

h1[rel*=external]

Не забывайте, что идентификаторы и классы — это тоже атрибуты и вы можете их в селекторах по атрибутам. Итак, давайте предположим, что вы пишете CSS для сайта, в котором вы не имеете доступа к разметке, а неопытный разработчик оставил вам такое:

Вы можете подсветить все эти элементы следующим образом:

div[id*=post]

[rel ^= external]
Атрибут начинается с заданного значения

Attribute Begins

h1[rel^=external]

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

a[href^=http://perishablepress.com]

[rel $= external]
Атрибут заканчивается на заданное значение

Если есть возможность сделать выбор по началу значения атрибута, то почему не быть и обратной возможности?

Attribute Ends

h1[rel$=external]

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

a[href$=#], a[href$=?]

[rel ~= external]
Атрибут находится в списке, разделённом пробелами

Как вы уже знаете, вы можете указать несколько классов стилей для одного элемента. И если вы делаете именно так, то вы можете использовать имя класса для доступа к элементу в CSS. В случае использования селекторов по атрибуту, не всё так просто. Если атрибуту rel присвоено несколько значений (разделённых пробелами), то вам необходимо использовать «~=»;

Attribute Space Separated

h1[rel~=external]

Вы можете подумать, почему бы нам не использовать в этом случае «*=» ? Действительно, такой вариант использования более гибок, однако он может быть слишком гибок. Рассматриваемый селектор требует, чтобы значение отделялось пробелом, а «*=» — нет. Таким образом, если у вас есть два элемента (один с rel=home friend-link, а второй с rel=home friend link), то вам необходимо использовать селектор для случая с пробелами, чтобы выбрать только второй элемент.

[rel |= external]
Атрибут находится в списке, разделённом дефисами

Список, разделённый дефисами очень похож на описанный выше список разделённый пробелами. Но опять же есть свои особенности перед использованием селектора с «*=».

Attribute Dash Separated

h1[rel|=external]

[title = one][rel ^= external]
Соответствие по нескольким атрибутам

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

Multiple Attributes

h1[rel=handsome][title^=Important]

Поддержка браузерами

Каждый пример, приведённый выше, работает во всех современных браузерах: Safari, Chrome, Firefox, Opera и IE7 и выше.

Селекторы атрибутов

Многие элементы HTML различаются по своему действию в зависимости от того, какие в них задействованы атрибуты. Например, может создавать кнопку, текстовое поле и другие элементы формы всего лишь за счёт изменения значения атрибута type . При этом добавление стиля к селектору input поменяет оформление одновременно у всех элементов . Селекторы атрибутов позволяют выбрать нужные элементы и установить для них стиль по наличию определённого атрибута или его значения.

Рассмотрим несколько наиболее популярных вариантов применения селекторов атрибутов.

Селектор [attribute]

Устанавливает стиль для элементов, у которых присутствует указанный атрибут. Значение атрибута при этом не учитывается. В качестве селектора используются квадратные скобки, внутри которых пишется произвольный атрибут.

[title]

Здесь для всех элементов, к которым добавляется атрибут title , задаётся нижнее точечное подчёркивание синего цвета.

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

a[target]

В примере 1 показано изменение стиля элемента , когда к нему добавляется атрибут readonly .

Пример 1. Вид элемента в зависимости от его атрибута

В данном примере селектор textarea устанавливает стиль для всех элементов , а селектор textarea[readonly] для элементов , к которым добавлен атрибут readonly . Результат примера показан на рис. 1.

Рис. 1. Изменение стиля элемента в зависимости от наличия атрибута readonly

Учтите, что атрибут у элемента должен присутствовать явно. К примеру, для атрибут type по умолчанию равен text , но селектор input[type] будет работать для и не будет для , хотя сами элементы отображаются одинаково.

Селектор [attribute=»value»]

Устанавливает стиль для элемента, когда задано указанное значение атрибута. Например, для , у которого значение type равно checkbox , селектор запишется следующим образом.

input[type="checkbox"]

Писать кавычки при этом не обязательно, но только если значение содержит латинские буквы и без пробелов. Так что input[type=checkbox] тоже работает.

Значения чувствительны к регистру, поэтому в CSS пишите их так же, как они написаны в HTML.

В примере 2 показано как установить стиль для элемента , основываясь на его значении.

Пример 2. Изменение поля формы

Результат данного примера показан на рис. 2.

Рис. 2. Изменение стиля элемента в зависимости от значения атрибута

Селекторы атрибутов можно применять вместо классов, поскольку [class=»block»] и .block выберут одни и те же элементы.

Селектор [attribute^=»value»]

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

[class^="view"]

При этом будут выделены элементы с классом view, view-block, viewer, но не block-view.

В примере 3 мы делаем жирными ссылки, адреса которых начинаются с ключевого слова http://. Это позволяет обозначить ссылки, ведущие на другие сайты.

Пример 3. Изменение стиля ссылок

Результат данного примера показан на рис. 3.

Рис. 3. Изменение стиля ссылок

Селектор [attribute*=»value»]

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

[class*="view"]

При этом цвет изменится для элементов с классом view, view-block, viewer, overview или block-view.

В примере 4 показано изменение стиля ссылок, в атрибуте href которых встречается слово «github». Для таких ссылок мы добавляем иконку, показывающую принадлежность к GitHub.

Пример 4. Стиль для сайта GitHub

Результат данного примера показан на рис. 4.

Рис. 4. Изменение стиля ссылки

Селектор [attribute$=»value»]

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

[class$="view"]

При этом цвет изменится для элементов с классом view, block-view, overview, но не view-block или viewer.

Таким способом можно автоматически разделять стиль для ссылок на сайты домена ru и для ссылок на сайты других доменов вроде com, как показано в примере 5.

Пример 5. Стиль для разных доменов

В данном примере содержатся две ссылки, ведущие на разные домены — com и ru. При этом к каждой такой ссылке с помощью стилей добавляется своя фоновая картинка (рис. 5). Стилевые свойства будут применяться только для тех ссылок, атрибут href которых оканчивается на «.ru» или «.com». Заметьте, что добавив к имени домена косую черту (//ya.ru/) или адрес страницы (//ya.ru/search), мы изменим тем самым окончание и стиль применяться уже не будет.

Рис. 5. Добавление картинки к ссылкам

Селекторы атрибутов допустимо комбинировать между собой, чтобы выбрать элементы, содержащие два и более атрибута. К примеру, для элемента , у которого есть атрибут type со значением password и атрибут required , запись будет следующей.

input[type="password"][required]

Пробелы между селекторами атрибутов не ставятся, всё пишется в одну строку.

Селекторы атрибутов

Селекторы атрибутов отбирают элементы по наличию атрибута или его значению.

Обозначает элемент с атрибутом по имени attr.

Обозначает элемент с именем атрибута attr и значением в точности совпадающим с value.

Обозначает элемент с именем атрибута attr значением которого является набор слов разделённых пробелами, одно из которых в точности равно value

Обозначает элемент с именем атрибута attr. Его значение при этом может быть или в точности равно «value» или может начинаться с «value» со сразу же следующим «-» (U+002D). Это может быть использовано когда язык описывается с подходом.

Обозначает элемент с именем атрибута attr значение которого начинается с «value»

Обозначает элемент с именем атрибута attr чьё значение заканчивается на «value»

Обозначает элемент с именем атрибута attr чьё значение содержит по крайней мере одно вхождение строки «value» как подстроки.

Пример

/* Все span с атрибутом "lang" будут жирными */ span[lang]  font-weight: bold; > /* Все span в Португалии будут зелёными */ span[lang="pt"]  color: green; > /* Все span с американским английским будут синими */ span[lang~="en-us"]  color: blue; > /* Любые span на китайском языке будут красными, как на упрощённом китайском (zh-CN) так и на традиционном (zh-TW) */ span[lang|="zh"]  color: red; > /* Все внутренние ссылки будут иметь золотой фон */ a[href^="#"]  background-color: gold; > /* Все ссылки с url заканчивающимся на .cn будут красными */ a[href$=".cn"]  color: red; > /* Все ссылки содержащие "example" в url будут иметь серый фон */ a[href*="example"]  background-color: #cccccc; > 

div class="hello-example"> a href="http://example.com">English:a> span lang="en-us en-gb en-au en-nz">Hello World!span> div> div class="hello-example"> a href="#portuguese">Portuguese:a> span lang="pt">Olá Mundo!span> div> div class="hello-example"> a href="http://example.cn">Chinese (Simplified):a> span lang="zh-CN">世界您好！span> div> div class="hello-example"> a href="http://example.cn">Chinese (Traditional):a> span lang="zh-TW">世界您好！span> div> 

Спецификации

Specification
Selectors Level 4 # attribute-selectors

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

• CSS селекторы: базовая поддержка браузерами
• Совместимость с браузерами селекторов и псевдо-селекторов CSS