Функция attr()

Описание

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

Синтаксис

attr(атрибут тип значение)

Значение	Описание
атрибут	Имя атрибута элемента передаваемое в CSS.
тип	Тип значения свойства CSS. Допустимы следующие ключевые слова: string (строки), color (цвет), url (веб-адрес), integer (целое число), number (вещественное число), angle (угол), time (время), deg (градус), а также единицы CSS вроде em, px и др.
значение	Значение, которое будет использоваться в том случае, если атрибута нет или браузер не может его получить.

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

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
.site::after {
content: ' (' attr(href) ') ';
background: rgba(22, 137, 213, 0.542);
color: rgb(255, 0, 0);
}
</style>
<p><a href='https://gki-webik.ru' class='site'>Полезный сайт</a></p>
</body>
</html>

Полезный сайт

Функция attr()

Описание

Синтаксис

Пример

Читайте также

Свойство text-emphasis-style

Свойство font-stretch

Свойство grid-column

Селекторы атрибутов со значениями в конце

Стили к элементам указанного типа