CSS Reference

attr()

要素から属性値を取得して使用する

attr() 関数は、指定の要素から属性に指定された値を取得し、その値をスタイルシート内で使用できる CSS 関数です。

詳細説明

HTML として下記のような記述があった場合、

<p data-num="10">個</p>
<p data-num="24">個</p>

CSS で下記のように attr() 関数を使用することで、

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

下記のような表示結果を得ることができます。

個

個

attr()のサンプルソース

<p data-num="10">個</p>
<p data-num="24">個</p>

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

主要ブラウザの対応

IE11 ○
Edge（EdgeHTML） ○
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するCSS関数

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome