attr()

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, or pc 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> = 
  string            |
  ident             |
  color             |
  number            |
  percentage        |
  length            |
  angle             |
  time              |
  frequency         |
  flex              |
  <dimension-unit>  

HTML

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

CSS

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

結果

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 {
  height: 100vh;
}

.background {
  background-color: red;
}

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

結果

• 属性セレクター
• HTML data-* 属性
• SVG data-* 属性