疑似要素 Pseudo-elements

疑似要素（Pseudo-elements）

疑似要素（Pseudo-elements）を用いると，ツリー構造について構造化言語で指定される以上の概観を創り出すことができます。

例えば，構造化言語には要素内容の1文字目あるいは1行目にアクセスするような仕組みはありません。

CSS では疑似要素でこれらの情報を参照することができます。

また疑似要素をもちいて，ソース文書中に存在しない内容を生成し，スタイル設定を行うこともできます。

疑似要素は，セレクタの主体（セレクタ最後尾の単純セレクタ）にのみ取り付けることができます：

不正な例：セレクタの主体以外に疑似要素がとり付けられているので不正です。

p:first-line strong { color: red; }

一つの要素に複数の疑似要素を適用させるには，各疑似要素を別々のセレクタの主体に取り付ける必要があります：

次例では，p要素に対して :first-line と :first-letter を同時に適用させています。

p:first-line { color: purple; } p:first-letter { color: red; }

疑似要素の処理段階において，User Agent が文書のツリー構造（DOM）を変化させる訳ではないので注意してください。

特にスタイルシートの効果で生成された内容が，例えば文書の再解析を行う目的で，構造化言語のプロセッサにフィードバックされることはありません。

:first-line疑似要素（The :first-line pseudo-element）

ブロックレベル要素の1行目に整形された文字列にスタイル設定を施します。

1行目の長さは，ページ幅やフォントサイズなど，様々な要因から決まることに注意してください。

:first-line疑似要素に適用可能なプロパティは，次に示すものに限定されています。

font properties、color properties、background properties、'word-spacing'、'letter-spacing'、'text-decoration'、'vertical-align'、'text-transform'、'line-height'、'text-shadow'、'clear'

HTML適合のUser Agent は，セレクタ内に:first-line疑似要素が出現するすべての規則を無視してもよいとされています。
あるいは代わりに，この疑似要素に適用されたプロパティの一部をサポートするだけでもよいとされています。

次例の規則は 'topic' というクラス名を持つp要素の，1行目の文字を赤に設定しています。

p.topic:first-line { color: red; }

:first-letter疑似要素（The :first-letter pseudo-element）

この疑似要素で生成された先頭文字は，float の値が 'none' である場合はインライン要素（印刷技法のイニシャルキャップの様な効果）に，それ以外の場合はフロート要素に"類似"します（印刷技法のドロップキャップと似た様な効果を実現できる）。

原則として先頭の1文字に対して適用されますが，時には2文字以上に適用されることもあります。

先頭の約物（引用符や括弧の類）に続く文字や，言語によって文字の組み合わせに特別な規則を持つような場合，それらの文字も:first-letter疑似要素内に含むべきであるとされています。

:first-letter疑似要素に適用可能なプロパティは，次に示すものに限定されています。

font properties、color properties、background properties、margin, padding, border, 'text-decoration'、'vertical-align'、'text-transform'、'line-height'、'text-shadow'、'float'、'clear'

HTML適合のUser Agent は，セレクタ内に:first-letter疑似要素が出現するすべての規則を無視してもよいとされています。
あるいは代わりに，この疑似要素に適用されたプロパティの一部をサポートするだけでもよいとされています。

次例の規則を適用すると，h1要素の先頭文字が少し大きめに表示されます。

h1:first-letter { font-size: larger; }

下記は疑似要素が重なった場合にどんな相互作用をもたらすかを示しています。

次例では，p要素に対して :first-line と :first-letter疑似要素を同時に適用させています：

p { color: red; font-size: 12pt; } p:first-line { color: blue; } p:first-letter { color: green; font-size: 200% }

こういったスタイルの場合，:first-letter疑似要素は:first-line疑似要素の内部に生成されることになります。

:first-line疑似要素に設定されたプロパティ値は:first-letter疑似要素に継承されますが，もし同じプロパティが設定されていれば上書きされることになります。

このスタイルシートの場合，各p要素の先頭文字はフォントサイズ '24pt' で緑色になり，先頭文字を除いた1行目の文字列は青になります。

そして段落の残りの文字は赤になります。

:before および :after疑似要素（The :before and :after pseudo-elements）

:before および :after疑似要素は，contentプロパティと共に使用して，要素内容の前後に生成内容を挿入するのに用います。

要素に生成されるオブジェクト（ボックスや画像）を整形する際は，生成内容もその要素の一部として扱われます。

:before および :after疑似要素は，自身がとり付けられた要素から継承可能なすべてのプロパティ値を継承します。

継承性を持たないプロパティの場合は初期値を取ることになります。

:before および :after疑似要素について，適合User Agent は，position，float，リストのプロパティ，そして表に関するプロパティを無視しなければならないと定められています。

displayプロパティについては以下の値が使用可能です：

主体がブロックレベル要素なら 'none'，'inline'，'block'，'marker' が使用可能。
この他は 'block' として扱われる。
主体がインライン要素なら 'none' と 'inline' が使用可能。
この他は 'inline' として扱われる。

将来のCSS仕様では，上記以外のdisplayプロパティの値が認められるようになるかもしれません。

以下は，アンカーに設定されたアクセスキーを生成内容として挿入する例です。

次のCSS規則は，accesskey属性を持つa要素の内容後方に，生成内容を挿入するようにしています。

a[accesskey]:after { text-transform: uppercase; content: "<" attr(accesskey) ">"; }

次のアンカーに上述の規則を適用した場合，要素内容の後方に<S> というような文字列が挿入されます。

<p><a href="samp.html" accesskey="s">Sample</a></p>

:first-letter，:first-line疑似要素をこれらと組み合わせると，その効果は挿入内容も含めた先頭文字あるいは1行目に適用されます。

次例では，生成されたSpecial! の先頭文字S が紫色に表示されることになります。

p.special:before { content: "Special! "; } p.special:first-letter { color: purple; }