html.okpython.net
Основы создания сайтов
CSS :: Функция attr()
Функция attr() (от англ. attribute – атрибут) позволяет извлекать значение атрибута указанного элемента для дальнейшего использования его в таблице стилей.
На данный момент функция надежно работает только с css-свойством content, хотя в скором времени ее можно будет использовать и с другими свойствами.
Синтаксис
attr(<имя атрибута> <тип значения>? [, <значение по умолчанию>]?)
Значения
- имя атрибута – имя требуемого атрибута.
- тип значения – в качестве необязательного параметра можно передавать тип значения атрибута. При этом допустимы следующие ключевые слова: angle, color, deg, integer (целое число), number (вещественное число), string (используется по умолчанию), time, url. Также в качестве типа разрешается указывать размерности доступных в CSS единиц измерения (смотреть).
- значение по умолчанию – в конце через запятую разрешается указывать необязательное значение по умолчанию, которое будет использовано, если атрибут у требуемого элемента будет отсутствовать или браузер не сможет получить его значение.
Ссылки
Официальный сайт W3C: https://www.w3.org/TR/css3-values/#funcdef-attr
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/attr
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> p::before{ content: attr(num)" "; font-weight: bold; } </style> </head> <body> <p num="1.">Первый пункт.</p> <p num="2.">Второй пункт.</p> <p num="3.">Третий пункт.</p> </body> </html>
Пример №1