項 目 | 説 明 |
---|---|
記述形式 | セレクタ {content: 値 } |
値 の形式 | [ URL,] [ normal | none | inhibit | コンテンツ・リスト ] |
初 期 値 | normal |
対応ブラウザー | C2+ / e8+ / N?+ / Fx1+ / Op4+ / Ch1+ / Sa1+ |
適用可能な要素 | すべての要素,::before擬似要素,::after擬似要素,::alternate擬似要素, ::marker擬似要素,::line-marker擬似要素,余白領域,@footnote 領域 |
継 承 | しない |
content プロパティ は,内容(コンテンツ)の挿入 を指定します。
CSS2.1 までにおいても,記述方法が結構複雑でしたが,CSS3 で拡張が行われたためにさらに難解になりました。 従来どおり機能を使う範囲では同様に使用できます。
半角カンマ( , )で区切った URL のリストに続き,半角ブランクで区切ったトークンのリストを記述するのが一般的な記述形式です。 ただし,コンテンツ・リスト は,
これらの値の指定方法は,以下のとおりです。(準備中)
次の例は,番号付きのリスト(箇条書き)を <ol> 要素 を用いて書く際に, 各 <li> 要素 の先頭の番号に "( )" や "[ ]" をつけるものです。 ::before 擬似要素 を使います。
HTMLソース | |
---|---|
CSS <head> ~ </head> |
<style type="text/css" media="screen, handheld, print, tv" > <!-- ol.parenth { counter-reset: itemp; } ol.parenth > li { display: block; } ol.parenth > li::before { content:"(" counter(itemp) ") "; counter-increment: itemp; } ol.bracket { counter-reset: itemb; } ol.bracket > li { display: block; } ol.bracket > li::before { content:"[" counter(itemb) "] "; counter-increment: itemb; } --> </style> |
HTML <body> ~ </body> |
<ol class="bracket"> <li>表示テスト(1項目目) <ol class="parenth"> <li>表示テスト(1-1項目目) <li>表示テスト(1-2項目目) <li>表示テスト(1-3項目目) </ol> <li>表示テスト(2項目目) <ol class="parenth"> <li>表示テスト(2-1項目目) <li>表示テスト(2-2項目目) </ol> </ol> |
ブラウザー 表示例 |
---|
|
<ol class="parenth"> 要素が現れる度に,カウンタ: itemp の値がリセットされ,また, <ol class="parenth"> の子要素の <li>要素 が現れる度に, カウンタ: itemp の値が 1 増加します。 <ol class="bracket"> についても同様で, カウンタ: itemb の値をリセット&更新します。
この例の詳細な解説は,擬似要素 から 子供結合子(子供セレクタ) までを参照してください。