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 プロパティやセレクタを逆引きできます。

IE11
Edge(EdgeHTML)
Edge(Chromium)
Firefox
Chrome
Safari
iOS Safari
Android Chrome

このページの上部へ