CSS3 Pre-Reference



attr()

属性値を参照

試す

コード

#containe .no1 {
  color: attr(title);
}
#containe .no2 {
  color: attr(title, color);
}
#containe .no3 {
  color: attr(title, string, blue);
}
#containe .no4 {
  color: attr(title, length);
}
#containe .no5 {
  color: attr(title, em);
}
#containe .no6::before {
  content: attr(title);
}
#containe .no7 {
  line-height: attr(title, number);
}

サンプル

○×と右側のOK/NGが合致していれば正しいです。

1:色が黒ければ○

2:色が赤ければ○

3:色が青ければ○

4:左が空いていれば○

5:左が空いていれば○

6:左にテキスト「ほげほげ:」が追加されて入れば○

行の高さが3倍になっていれば○

コメントする


対応ブラウザ

Firefox
まだ
Chrome/Safari
まだ
Opera
まだ
InternetExplorer
まだ

パラメータ

レベル 3
参考文献 CSS3 Values and Units#3.7.1. The 'attr' function

解説

属性の値を参照します。

CSS2では単に属性の値を前か後ろに追加するだけでしたが、CSS3では、かなり汎用性を持たせた設計になっています。

記述方法は、”attr(<属性名>,<種類>,<値>)”です。<種類>、<値>はそれぞれオプションです。

<属性名>

属性の名称を指定します。HTMLでいうaltやheight、langなど。

属性名には名前空間を指定することもできます。

<種類>

属性値の種類を指定します。指定可能な値は以下の通り。省略時の値は”string”です。

string
属性値を文字列として変換します。デフォルト値は空文字列です。
color
属性値を色として変換します。デフォルト値はcolorプロパティの値です。
url
属性値をURLとして変換します。デフォルト値は一般的なエラー画面のURLです。(つまり404 Not Found)
integer
属性値を整数値として変換します。デフォルト値は0です。範囲外の値の場合も0に変換します。
number
属性値を数値として変換します。デフォルト値は0.0です。範囲外の値の場合も0に変換します。
length, angle, time, frequency
属性値を長さ、角度、時間、周波数として変換します。デフォルトの単位の指定はありませんので、属性値に単位を含んでいる必要があります。デフォルト値は0です。範囲外の値の場合も0に変換します。
em, ex, px, gd, rem, vw, vh, vm, mm, cm, in, pt, pc, deg, grad, rad, ms, s, Hz, kHz, %
属性値を小数点として解釈します。指定した単位が自動的に追加されます。デフォルト値は0です。範囲外の値の場合も0に変換します。

<値>

CSSの値を指定します。参照された属性が無い場合、または属性値が正しくなかった場合にこの値を利用します。

<style type="text/css">
#sampleDisp * {
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border: 1px solid #1b292d;
}
#sampleDisp .no1 {
    color: attr(title);
}
#sampleDisp .no2 {
    color: attr(title, color);
}
#sampleDisp .no3 {
    color: attr(title, string, blue);
}
#sampleDisp .no4 {
    color: attr(title, length);
}
#sampleDisp .no5 {
    color: attr(title, em);
}
#sampleDisp .no6::before {
    content: attr(title);
}
#sampleDisp .no7 {
    line-height: attr(title, number);
}
</style>

トラックバック

投稿されたコメント