CSS attr()関数

定義と使用方法

CSSの attr() 関数は選択された要素の属性値を返します。

例

以下の例では、各<a>要素の後にhref属性の値を挿入し、括弧で囲んでいます：

a:after {
  content: " (" attr(href) ")";
}

自分で試してみてください

CSS文法

attr(attribute-name タイプ fall back)
値 説明
attribute-name 必須。HTML要素の属性名。
タイプ

オプション。属性値のタイプまたは単位。以下のいずれかができます：

  • string
  • color
  • url
  • integer
  • number
  • length
  • angle
  • em、ex、px、rem、vw、vh、vmin、vmax、mm、cm、in、pt または pc
  • deg、grad、rad
  • time
  • s、ms
  • Hz、kHz
  • %
  • frequency
fall back オプション。属性が欠けている場合または無効な値を含んでいる場合の代替値。

技術的詳細

バージョン： CSS2

ブラウザのサポート

テーブルの数字は、その機能を完全にサポートする最初のブラウザのバージョンを示しています。

クローム エッジ ファイアフォックス サファリ オペラ
attr()
2 8 1 3.1 9
タイプ 値
サポートされていません サポートされていません サポートされていません サポートされていません サポートされていません
fall back 値
サポートされていません サポートされていません 119 サポートされていません サポートされていません