CSSattr() 関数は、選択された要素の属性の値を受け取り、スタイルシートの中で使うために使用することができます。疑似要素で使用することもでき、その場合は擬似要素を作る元になった要素の属性値が返されます。

/* 単純な使用 */
attr(data-count);
attr(title);

/* 型付き */
attr(src url);
attr(data-count number);
attr(data-width px);

/* 代替値付き */
attr(data-count number, 0);
attr(src url, '');
attr(data-width px, inherit);
attr(data-something, 'default');

メモ: attr() 関数はどの CSS プロパティでも使用することができますが、 content 以外のプロパティでの対応は実験的であり、型や単位の引数の対応はまちまちです。

本番で使用する前にブラウザーの対応を注意深く確認してください。

構文

attribute-name
CSS で参照する、 HTML 要素の属性名です。
<type-or-unit>
属性値の型またはその単位を示すキーワードです。 HTML では暗黙に単位を持つ属性があります。属性に対して無効な値を <type-or-unit> で与えると、 attr() 式も無効になります。省略すると既定値の string になります。有効な値は以下の通りです。
キーワード 関係する型 コメント 既定値
string <string> 属性値は CSS <string> として扱われます。再解析はされず、特に文字は CSS エスケープで他の文字に変換されることなく、そのまま使用されます。 空文字列
color <color> 属性値はハッシュ (3値または6値のハッシュ) またはキーワードとして解析されます。妥当な CSS の <string> 値でなければなりません。
前後の空白は除去されます。
currentColor
url <url> 属性値は、 CSS の url() 関数の中で使用される文字列として解析されます。
相対 URL は、スタイルシートからの相対ではなく、元の文書からの相対で解決されます。
前後の空白は除去されます。
一般的なエラーの状況で存在しない文書を指す about:invalid の URL。
integer <integer> 属性値は CSS の <integer> として解析されます。妥当ではない場合、つまり整数ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
前後の空白は除去されます。
0、または 0 が妥当な値ではないプロパティでは、プロパティの最小値。
number <number> 属性値は CSS の <number> として解析されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
前後の空白は除去されます。
0、または 0 が妥当な値ではないプロパティでは、プロパティの最小値。
length <length> 属性値は CSS の <length> の距離として単位を含んで (12.5em など) 解釈されます。妥当ではない場合、つまり長さではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
指定された値が相対的な長さの場合は、 attr() は絶対的な値に変換して計算します。
前後の空白は除去されます。
0、または 0 が妥当な値ではないプロパティでは、プロパティの最小値。
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, pc <length> 属性値は CSS の <number>、つまり単位なし (12.5 など) で解析され、特定の単位を付けた <length> として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
指定された値が相対的な長さの場合は、 attr() は絶対的な値に変換して計算します。
前後の空白は除去されます。
0、または 0 が妥当な値ではないプロパティでは、プロパティの最小値。
angle <angle> 属性値は CSS の <angle> の大きさとして単位を含んで (30.5deg など) 解釈されます。妥当ではない場合、つまり角度ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
前後の空白は除去されます。
0deg、または 0deg が妥当な値ではないプロパティでは、プロパティの最小値。
deg, grad, rad <angle> 属性値は CSS の <number>、つまり単位なし (12.5 など) で解析され、特定の単位を付けた <angle> として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
前後の空白は除去されます。
0deg、または 0deg が妥当な値ではないプロパティでは、プロパティの最小値。
time <time> 属性値は CSS の <time> の大きさとして単位を含んで (30.5ms など) 解釈されます。妥当ではない場合、つまり時間ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
前後の空白は除去されます。
0s、または 0s が妥当な値ではないプロパティでは、プロパティの最小値。
s, ms <time> 属性値は CSS の <number>、つまり単位なし (12.5 など) で解析され、特定の単位を付けた <time> として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
前後の空白は除去されます。
0s、または 0s が妥当な値ではないプロパティでは、プロパティの最小値。
frequency <frequency> 属性値は CSS の <frequency> の大きさとして単位を含んで (30.5ms など) 解釈されます。妥当ではない場合、つまり周波数ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 0Hz、または 0Hz が妥当な値ではないプロパティでは、プロパティの最小値。
Hz, kHz <frequency> 属性値は CSS の <number>、つまり単位なし (12.5 など) で解析され、特定の単位を付けた <frequency> として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
前後の空白は除去されます。
0Hz、または 0Hz が妥当な値ではないプロパティでは、プロパティの最小値。
% <percentage> 属性値は CSS の <number>、つまり単位なし (12.5 など) で解析され、 <percentage> として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
指定された値が長さの場合は、 attr() は絶対的な値に変換して計算します。
前後の空白は除去されます。
0%、または 0% が妥当な値ではないプロパティでは、プロパティの最小値。
<fallback>
関連する属性が見つからないか、無効値を含むときに使われる値です。この値は使用されないとしても attr() の使われている場所で有効値でなければならず、他の attr() 式を含んではいけません。 attr() がプロパティの唯一の構成値でないときは、その <fallback> 値は <type-or-unit> で定義された型である必要があります。セットされていないと、CSS は各 <type-or-unit> で定義された既定値を使います。

形式文法

attr( <attr-name> <type-or-unit>? [, <attr-fallback> ]? )

where
<type-or-unit> = string | integer | color | url | integer | number | length | angle | time | frequency | em | ex | px | rem | vw | vh | vmin | vmax | mm | q | cm | in | pt | pc | deg | grad | rad | ms | s | Hz | kHz | %

content プロパティ

HTML

<p data-foo="hello">world</p>

CSS

[data-foo]::before {
  content: attr(data-foo) " ";
}

結果

<color>

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

HTML

<div class="background" data-background="lime"></div>

CSS

.background {
  background-color: red;
}

.background[data-background] {
  background-color: attr(data-background color, red);
}

仕様書

仕様書 状態 備考
CSS Values and Units Module Level 3
attr() の定義
勧告候補 2 つのオプション引数を追加。全プロパティで使える。 <string> 以外の値が返せるようになった。これらの変更は実験的であり、ブラウザーの対応が少なすぎると CR 段階で外される可能性がある
CSS Level 2 (Revision 1)
attr() の定義
勧告 content プロパティに限定。常に <string> を返す

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 2Edge 完全対応 12Firefox 完全対応 1IE 完全対応 8Opera 完全対応 9Safari 完全対応 3.1WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 完全対応 12Firefox Android 完全対応 4Opera Android 完全対応 10Safari iOS 完全対応 3.1Samsung Internet Android 完全対応 あり
<fallback>
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
<type-or-unit>
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, wbamberg, mrstork, prayash, ethertank, sosleepy
最終更新者: mfuji09,