<h3 rel="friend">David Walsh</h3>

h3[rel=friend] {
  /* woohoo! */
}

<h2 rel="external">Attribute Equals</h2>

h2[rel=external] { color: red; }

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


a[href=http://perishablepress.com] { color: red; }

input[type=text] { padding: 3px; }
input[type=radio] { float: left; }

<h2 rel="xxxexternalxxx">Attribute Contains</h2>

h2[rel*=external] { color: red; }

<div></div>
<div></div>
<div></div>

div[id*=post] { color: red; }

<h2 rel="external-link yep">Attribute Begins</h2>

h2[rel^=external] { color: red; }

a[href^=http://perishablepress.com] { color: red; }

<h2 rel="friend external">Attribute Ends</h2>

h2[rel$=external] { color: red; }

a[href$=#], a[href$=?] { color: red; }

<h2 rel="friend external sandwich">Attribute Space Separated</h2>

h2[rel~=external] { color: red; }

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

h2[rel|=external] { color: red; }

<h2 rel="handsome" title="Important note">Multiple Attributes</h2>

h2[rel=handsome][title^=Important] { color: red; }

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

CSS — Селекторы атрибутов | css Tutorial

пример

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

Заметки:

1. Значение атрибута может быть окружено кавычками или двойными кавычками. Никакие кавычки вообще не могут работать, но это не действует в соответствии со стандартом CSS и не рекомендуется.

2. Не существует единой интегрированной спецификации CSS4, поскольку она разделяется на отдельные модули. Тем не менее, существуют модули уровня 4. См. Поддержку браузера .

[attribute]

Выбирает элементы с заданным атрибутом.

div[data-color] {
  color: red;
}

<div data-color="red">This will be red</div>
<div data-color="green">This will be red</div>
<div data-background="red">This will NOT be red</div>

Живая демонстрация на JSBin

[attribute="value"]

Выбирает элементы с заданным атрибутом и значением.

div[data-color="red"] {
  color: red;
}

<div data-color="red">This will be red</div>
<div data-color="green">This will NOT be red</div>
<div data-color="blue">This will NOT be red</div>

Живая демонстрация на JSBin

[attribute*="value"]

Выбирает элементы с заданным атрибутом и значением, где данный атрибут содержит заданное значение где угодно (в качестве подстроки).

[class*="foo"] {
  color: red;
}

<div>This will be red</div>
<div>This will be red</div>
<div>This will be red</div>
<div>This will be red</div>
<div>This will NOT be red</div>

Живая демонстрация на JSBin

[attribute~="value"]

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

[class~="color-red"] {
  color: red;
}

<div>This will be red</div>
<div>This will NOT be red</div>

Живая демонстрация на JSBin

[attribute^="value"]

Выбирает элементы с заданным атрибутом и значением, где данный атрибут начинается со значения.

[class^="foo-"] {
  color: red;
}

<div>This will be red</div>
<div>This will be red</div>
<div>This will NOT be red</div>

Живая демонстрация на JSBin

[attribute$="value"]

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

[class$="file"] {
  color: red;
}

<div>This will be red</div>
<div>This will be red</div>
<div>This will NOT be red</div>

Живая демонстрация на JSBin

[attribute|="value"]

Выбирает элементы с заданным атрибутом и значением, где значение атрибута является точно заданным значением или является точно заданным значением, за которым следует - (U + 002D)

[lang|="EN"] {
  color: red;
}

<div lang="EN-us">This will be red</div>
<div lang="EN-gb">This will be red</div>
<div lang="PT-pt">This will NOT be red</div>

Живая демонстрация на JSBin

[attribute="value" i]

Выбирает элементы с заданным атрибутом и значением, где значение атрибута может быть представлено как Value , VALUE , vAlUe или любая другая возможность vAlUe регистра.

[lang="EN" i] {
  color: red;
}

<div lang="EN">This will be red</div>
<div lang="en">This will be red</div>
<div lang="PT">This will NOT be red</div>

Живая демонстрация на JSBin

0-1-0

То же, что и селектор классов и псевдоклассы.

*[type=checkbox] // 0-1-0

Обратите внимание, что это означает, что селектор атрибутов может использоваться для выбора элемента по его идентификатору на более низком уровне специфичности, чем если бы он был выбран с помощью селектора ID : [id="my-ID"] нацелен на тот же элемент, что и #my-ID но с более низкой специфичностью.

Подробнее см. Раздел «Синтаксис» .

Функция attr () | htmlbook.ru

Краткая информация

Версии CSS

Описание

Функция attr () используется для добавления значения атрибута HTML-элемента в стилевое свойство. Например, можно получить значение атрибута class, а затем использовать его в качестве значения свойства background для изменения цвета.

Синтаксис

  attr (имя_атрибута)  

  attr (имя_атрибута, <тип>, <значение>)  

Значения

имя_атрибута

Имя атрибута элемента передаваемое в CSS.

<тип>

Тип значения свойства CSS. Допустимы следующие ключевые слова: строка (строки), цвет (цвет), url (веб-адрес), целое число (целое число), число (вещественное число), угол (угол), время (), град (градус), а также единицы CSS вроде em, px и др.

<значение>

Значение, сообщу будет, в том случае, если романта нет или браузер не может его получить.

Пример

HTML5CSS3IECrOpSaFx

  

 
  
  
  <стиль>
   .site :: after {
    содержание: '(' attr (href) ')'; / * Выводим адрес ссылки в скобках * /
    размер шрифта: 0.8em; / * Уменьшаем текст * /
    фон: желтый; / * Жёлтый фон * /
   }
  
 
 
   
  Полезный сайт  
 
  

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

attr — Веб-технологии для разработчиков

Функция attr () | Справочник CSS

• HTML
  • Учебник HTML
  • Справочник тегов
  • Атрибуты событий
  • Глобальные атрибуты
  • Коды языков
  • Мнемоники
  • Цвета
  • Тесты знаний
• CSS
  • Учебник CSS
  • Справочник свойств
  • Селекторы
  • Обязательства
  • Правила
  • Flexbox генератор
  • Сетевой генератор
  • Учебник МЕНЬШЕ
• JavaScript
  • Интерфейсы веб API
  • Объект Массив
  • Дата размещения
  • Объект Функция
  • Объект Global
  • Объект JSON
  • Объект Математика
  • Номер объекта
  • Объект Объект
  • Объект RegExp
  • Обещание объекта
  • Строка объекта
• jQuery
  • Селекторы
  • События
  • Методы ДОМ
  • Перераз
  • Утилиты
  • Эффекты
  • AJAX
  • Объект Обратные звонки
  • Объект отложен

HTML

• HTML учебник
• Справочник тегов
• Атрибуты событий
• Глобальные атрибуты
• Мнемоники
• Коды языков
• HTML цвета
• Тесты знаний

CSS

• Учебник CSS
• Справочник свойств
• CSS селекторы
• CSS функции
• Правила CSS
• Flexbox генератор
• Сетевой генератор
• МЕНЬШЕ учебник

JavaScript

• Интерфейсы веб API
• Объект Массив
• Дата размещения
• Объект Функция
• Объект Global
• Объект JSON
• Объект Math ^β
• Номер объекта
• Объект Объект
• Обещание объекта
• Объект RegExp
• Строка объекта

jQuery

• jQuery селекторы
• jQuery события
• jQuery методы DOM
• jQuery перемещение
• jQuery утилиты
• jQuery эффекты
• jQuery AJAX
• Обратные вызовы объекта jQuery
• jQuery объект отложен

CSS свойства

• align-content
• align-items
• выровнять себя
• все
• анимация
• задержка анимации
• анимация-направление
• продолжительность анимации
• режим заливки анимации
• количество итераций анимации
• имя-анимации
• состояние воспроизведения анимации
• функция синхронизации анимации
• задняя поверхность-видимость
• фон
• фон-приставка
• фоновый режим наложения
• фон-клип
• цвет фона
• фоновое изображение
• фон происхождения
• фон-позиция
• фон-повтор
• размер фона
• граница
• нижняя граница
• цвет нижней границы
• граница-нижний-левый-радиус
• граница-нижний-правый-радиус
• с окантовкой снизу
• ширина-нижняя граница
• пограничный обвал
• цвет рамки
• изображение границы
• граница-изображение-исход
• повтор изображения границы
• фрагмент изображения границы
• источник изображения границы
• ширина-границы-изображения
• граница слева
• левая рамка, цвет
• с рамкой слева
• ширина рамки слева
• граница-радиус
• граница правая
• цвет границы справа
• с окантовкой справа
• ширина рамки справа
• интервал границы
• с бордюром
• кайма
• цвет верхней границы
• граница-верх-левый-радиус
• граница-верх-правый-радиус
• с бордюром
• ширина по верху границы
• ширина границы
• низ
• тень коробки
• размер коробки
• обрыв после
• перед перерывом
• взлом
• со стороны подписи
• прозрачный
• зажим
• цвет
• количество столбцов
• столбец-заполнитель
• колонна-зазор
• столбец-линейка
• столбец-правило-цвет
• стиль столбца-правила
• ширина-правило столбца
• колонна-пролет
• ширина столбца
• столбцов
• содержание
• счетчик
• сброс счетчика
• курсор
• направление
• дисплей
• пустых ячеек
• фильтр
• гибкий
• гибкая основа
• гибкое направление
• гибкий поток
• гибкий рост
• термоусадочная
• гибкая пленка
• поплавок
• шрифт
• @ font-face
• семейство шрифтов
• размер шрифта
• стиль шрифта
• вариант шрифта
• font-weight
• сетка
• сетка
• сетка-автоматические столбцы
• сетка-автоматический поток
• сетка автоматических рядов
• сетка-столб
• конец столбца сетки
• сетка-столбец-зазор
• начало столбца сетки
• сетка-зазор
• сетка-рядка
• сетка-ряд-начало
• сетка-междурядье
• конец строки сетки
• сетка-шаблон
• сетка-шаблон-области
• сетка-шаблон-столбцы
• сетка-шаблон-ряды
• justify-content
• justify-items
• оправдать себя
• высота
• @keyframes
• осталось
• межбуквенный интервал
• высота строки
• в виде списка
• изображение в стиле списка
• позиция в стиле списка
• тип списка
• маржа
• нижнее поле
• левое поле
• поле справа
• верхняя маржа
• макс. Высота
• макс. Ширина
• @media
• мин-высота
• мин. Ширина
• непрозрачность
• заказать
• детей-сирот
• наброски
• контурный цвет
• контур-офсет
• наброски
• ширина контура
• перелив
• перелив-обертка
• переполнение-x
• переполнение
• набивка
• обивка нижняя
• отступ слева
• обивка правая
• утеплитель
• разрыв страницы после
• разрыв страницы до
• разрыв страницы внутри
• перспектива
• перспективное происхождение
• место-содержание
• единиц места
• самообслуживание
• позиция
• цитат
• изменить размер
• правый
• размер табулятора
• стол-сервиз
• выравнивание текста
• выравнивание текста последнее

attr () | CSS | WebReference

Функция attr () используется для добавления значения атрибута HTML-элемент в стилевое свойство. Например, можно получить значение атрибута class, а затем использовать его в качестве значения свойства background для изменения цвета.

Синтаксис

  attr (<атрибут> <тип>? [, <Значение>]?)  

Обозначения

Значения

<атрибут>

Имя атрибута элемента передаваемое в CSS.

<тип>

Тип значения свойства CSS. Допустимы следующие ключевые слова: строка (строки), цвет (цвет), url (веб-адрес), целое число (целое число), число (вещественное число), угол (угол), время (), град (градус), а также единицы CSS вроде em, px и др.

<значение>

Значение, какое будет сообщение в том случае, если атрибута нет или браузер не может его получить.

Между версиями CSS есть небольшая разница по прочтению некоторых функций attr (). В качестве CSS2.1 функция attr () может быть только заведомо со своимством content и возвращает всегда значение в значениях. В CSS3 attr () допустимо использовать с любым свойством и возвращаемое значение может быть в любом допустимом для CSS3 формате.

Пример