CSS3 Pre-Reference



move-to

内容の移動先指定

試す

コード

#sampleDisp p {
  content: "div";
  color: green;
}
#sampleDisp p::alternate {
  content: "alternate1";
  move-to: example1;
}
#sampleDisp p::alternate::before {
  content: "before1";
}
#sampleDisp p::after {
  content: "after1" pending(example1);
  color: navy;
}
#sampleDisp p::after::alternate {
  content: "alternate2";
  move-to: example2;
}
#sampleDisp p::after(2) {
  content: "after2" pending(example2);
  color: purple;
}

サンプル

すべての段落が
div after1 before1 alternate1 after2 alternate2
のような表示になります。

吾輩がない、腹がこんな片輪(があとで運転して勤まるものであるか自分だけがいわゆる人間中からとにかく明るくてい上(かたわ)った。なぜそんな無闇(むやみ)をしたと聞く人があるかも知れぬ。

青文字その後(けむり)したから火がある。ただその日がよかろう度毎まった。

コメントする


対応ブラウザ

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

パラメータ

normal | here | <識別子>
初期値 normal
適用 すべての要素、::before、::after、::alternate疑似要素
継承 しない
レベル 3
%の解釈 -
適用メディア Visual
参考文献 CSS3 Generated and Replaced Content Module#5. Moving content to later in the document: the 'move-to' property

解説

内容の移動先を指定します。主に"::alternate"疑似要素の表示先を指定するために利用します。"::alternate"疑似要素を利用する場合は必須です。

normal

"::alternate"疑似要素の場合、上位の要素が'footnote'、 'endnote'、'section-note'カウンターを使用している場合は、それぞれ、'footnotes'、 'endnote'、'section-note'と解釈します。

それ意外の場合は、'here'と解釈されます。

here
要素を動かさず、その場で表示します。
<識別子>
要素を次に'pending()'汎関数で同じ識別子を指定した場所に移動します。もし次の移動位置が見つからずに文書が終了してしまった場合、最後に移動された順に挿入します。

移動された要素は、移動先ではなく移動元のスタイルを継承します。

トラックバック

投稿されたコメント