attr()

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

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

/* Simple usage */
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");

構文

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

形式文法

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

ここで
<type-or-unit> = string | color | url | integer | number | length | angle | time | frequency | cap | ch | em | ex | ic | lh | rlh | rem | vb | vi | vw | vh | vmin | vmax | mm | Q | cm | in | pt | pc | px | deg | grad | rad | turn | ms | s | Hz | kHz | %

content プロパティ

HTML

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

CSS

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

結果

<color> 値

Experimental

これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

HTML

<div class="background" data-background="lime">background expected to be red if your browser does not support advanced usage of attr()</div>

CSS

.background {
  background-color: red;
}

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

仕様書

仕様書 状態 備考
CSS Values and Units Module Level 4
attr() の定義
編集者草案 var() のように動作するように変更。 attr() を含むプロパティ値は解析時に有効となり、属性値の検証は計算値になるまで延期されます。
CSS Values and Units Module Level 3
attr() の定義
勧告候補

2 つのオプション引数を追加
全プロパティで使用可能
<string> 以外の値が返せるようになった。

これらの変更は実験的であり、ブラウザーの互換性が少なすぎると CR 段階で外される可能性がある
CSS Level 2 (Revision 1)
attr() の定義
勧告 content プロパティに限定
常に <string> を返す

ブラウザーの互換性

BCD tables only load in the browser

関連情報