attr()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
メモ: attr()
関数はどの CSS プロパティでも使用することができますが、 content
以外のプロパティでの対応は実験的であり、型や単位の引数の対応はまちまちです。
attr()
は CSS の関数で、選択された要素の属性の値を受け取り、スタイルシートの中で使うために使用されます。擬似要素で使用することもでき、その場合は擬似要素を作る元になった要素の属性値が返されます。
/* 単純な使用法 */
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>
Experimental-
属性値の型またはその単位を示すキーワードです。 HTML では暗黙に単位を持つ属性があります。属性に対して無効な値を
<type-or-unit>
で与えると、attr()
式も無効になります。省略すると既定値のstring
になります。有効な値は以下の通りです。string
-
属性値は CSS
<string>
として扱われます。再解析はされず、特に文字は CSS エスケープで他の文字に変換されることなく、そのまま使用されます。既定値は空文字列です。
color
Experimental-
属性値はハッシュ (3 値または 6 値のハッシュ) またはキーワードとして解析されます。妥当な CSS の
<string>
値でなければなりません。前後の空白は除去されます。既定値は
currentcolor
です。 url
Experimental-
属性値は、 CSS の
url()
関数の中で使用される文字列として解析されます。 相対 URL は、スタイルシートからの相対ではなく、元の文書からの相対で解決されます。 前後の空白は除去されます。既定値は、一般的なエラーの状況で存在しない文書を指す
about:invalid
の URL です。 integer
Experimental-
属性値は CSS の
<integer>
として解析されます。妥当ではない場合、つまり整数ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 前後の空白は除去されます。既定値は
0
、または0
が妥当な値ではないプロパティでは、プロパティの最小値です。 number
Experimental-
属性値は CSS の
<number>
として解析されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 前後の空白は除去されます。既定値は
0
、または0
が妥当な値ではないプロパティでは、プロパティの最小値です。 length
Experimental-
属性値は CSS の
<length>
の距離として単位を含んで (12.5em
など) 解釈されます。妥当ではない場合、つまり長さではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 指定された値が相対的な長さの場合は、attr()
は絶対的な値に変換して計算します。
前後の空白は除去されます。既定値は
0
、または0
が妥当な値ではないプロパティでは、プロパティの最小値です。 em
,ex
,px
,rem
,vw
,vh
,vmin
,vmax
,mm
,cm
,in
,pt
, orpc
Experimental-
属性値は CSS の
<number>
、つまり単位なし (12.5
など) で解析され、特定の単位を付けた<length>
として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 指定された値が相対的な長さの場合は、attr()
は絶対的な値に変換して計算します。
前後の空白は除去されます。既定値は
0
、または0
が妥当な値ではないプロパティでは、プロパティの最小値です。 angle
Experimental-
属性値は CSS の
<angle>
の大きさとして単位を含んで (30.5deg
など) 解釈されます。妥当ではない場合、つまり角度ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 前後の空白は除去されます。既定値は
0deg
、または0deg
が妥当な値ではないプロパティでは、プロパティの最小値です。 deg
,grad
,rad
Experimental-
属性値は CSS の
<number>
、つまり単位なし (12.5
など) で解析され、特定の単位を付けた<angle>
として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 前後の空白は除去されます。既定値は
0deg
、または0deg
が妥当な値ではないプロパティでは、プロパティの最小値です。 time
Experimental-
属性値は CSS の
<time>
の大きさとして単位を含んで (30.5ms
など) 解釈されます。妥当ではない場合、つまり時間ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 前後の空白は除去されます。既定値は
0s
、または0s
が妥当な値ではないプロパティでは、プロパティの最小値です。 s
,ms
Experimental-
属性値は CSS の
<number>
、つまり単位なし (12.5
など) で解析され、特定の単位を付けた<time>
として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 前後の空白は除去されます。既定値は
0s
、または0s
が妥当な値ではないプロパティでは、プロパティの最小値です。 frequency
Experimental-
属性値は CSS の
<frequency>
の大きさとして単位を含んで (30.5ms
など) 解釈されます。妥当ではない場合、つまり周波数ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。既定値は
0Hz
、または0Hz
が妥当な値ではないプロパティでは、プロパティの最小値です。 Hz
,kHz
Experimental-
属性値は CSS の
<number>
、つまり単位なし (12.5
など) で解析され、特定の単位を付けた<frequency>
として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 前後の空白は除去されます。既定値は
0Hz
、または0Hz
が妥当な値ではないプロパティでは、プロパティの最小値です。 %
Experimental-
属性値は CSS の
<number>
、つまり単位なし (12.5
など) で解析され、<percentage>
として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 指定された値が長さの場合は、attr()
は絶対的な値に変換して計算します。 前後の空白は除去されます。既定値は
0%
、または0%
が妥当な値ではないプロパティでは、プロパティの最小値です。
<fallback>
Experimental-
関連する属性が見つからないか、無効値を含むときに使われる値です。設定されていない場合は、 CSS は各
<type-or-unit>
で定義された既定値を使います。
形式文法
<attr()> =
attr( <attr-name> <attr-type>? , <declaration-value>? )
<attr-name> =
[ <ident-token> '|' ]? <ident-token>
<attr-type> =
type( <syntax> ) |
string |
<attr-unit>
<syntax> =
'*' |
<syntax-component> [ <syntax-combinator> <syntax-component> ]* |
<syntax-string>
<syntax-component> =
<syntax-single-component> <syntax-multiplier>? |
'<' transform-list '>'
<syntax-combinator> =
'|'
<syntax-string> =
<string>
<syntax-single-component> =
'<' <syntax-type-name> '>' |
<ident>
<syntax-multiplier> =
'#' |
'+'
<syntax-type-name> =
angle |
color |
custom-ident |
image |
integer |
length |
length-percentage |
number |
percentage |
resolution |
string |
time |
url |
transform-function
例
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);
}
結果
仕様書
Specification |
---|
CSS Values and Units Module Level 5 # attr-notation |
ブラウザーの互換性
BCD tables only load in the browser