CSS3 Pre-Reference



ターゲット・カウンター

リンク先のカウンター値

試す

対応ブラウザがないため、例は割愛します。

コメントする


対応ブラウザ

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

パラメータ

レベル 3
参考文献 CSS Generated Content for Paged Media Module#4.1. The ‘target-counter’ and ‘target-counters’ values

解説

リンク先のカウンター値を参照します。

式は以下の通り:

target-counter(<リンクを参照する属性>, <カウンター名>, <リストスタイルタイプ>)
target-counters(<リンクを参照する属性>, <カウンター名>, <文字列>, <リストスタイルタイプ>)

上記の通り、カウンターとの違いは、その場のカウンターの値ではなく、リンク先のカウンターの値を取得する点にあります。Wordの「相互参照」のような機能を実現します。

この関数は、"content"プロパティで利用します。

たとえば、以下のようなソースがあるとすると:

<style>
a::after { content: "(" target-counter(attr(href, url), page, decimal) "ページを参照)" }
</style>
<blockquote>
互いに、等速運動する座標系の間では物理学の法則が不変な形を保つという原理(<a href="#principle_of_relativity">相対性原理</a>)と、<a href="#special_relativity" title="光速度不変の原理">光速度不変の原理</a>を仮定したときの物体の運動を記述する。
</blockquote>

以下のように整形されます。

互いに、等速運動する座標系の間では物理学の法則が不変な形を保つという原理(相対性原理(25ページを参照))と、光速度不変の原理(241ページを参照)を仮定したときの物体の運動を記述する。

トラックバック

投稿されたコメント