擬似要素

擬似要素は、要素では特定できない文書内の一部分にスタイルを適用する時に使います。

擬似要素は、擬似要素名の前にコロンを記述します。 CSS3 から、擬似クラスと擬似要素の区別をつけるために、擬似要素はコロン２つ（ :: ）で記述するようになりました。 現在のスタイルシートとの互換性を保つため、CSS1 や CSS2 で導入された、コロン１つ（ : ）の記述 ( :first-line、:first-letter、:before、:after ) も認められています。

E::first-line

E 要素の最初の１行目に対してスタイルが適用されます。

::first-line 擬似要素は、ブロックボックスや inline-block、table-caption、table-cell などブロック的なコンテナにだけ適用されます。 適用できるプロパティは、font 関連、color 関連、background 関連、 word-spacing、letter-spacing、text-decoration、text-transform、line-height となります。 （UA によっては、他のプロパティも使えるかもしれません。）

example

p::first-line { font-weight: bold; }

source

<p>ナタリー・ポートマン主演の「あなたのために」というアメリカ映画は、 彼氏に捨てられた身重の主人公が、新しい土地で新しい友人たちに助けられながら幸せを掴んでいくという 心温まるストーリになってます。是非一度ご覧になってみてください。</p>

display

ナタリー・ポートマン主演の「あなたのために」というアメリカ映画は、 彼氏に捨てられた身重の主人公が、新しい土地で新しい友人たちに助けられながら幸せを掴んでいくという 心温まるストーリになってます。是非一度ご覧になってみてください。

プロパティの継承と架空タグ列

上記の例が、架空タグ列で書き換えられたとしたらこういう感じです。（※ " ナタ～土地で新し "までが最初の行として）

<p><p::first-line> ナタリー・ポートマン主演の「あなたのために」というアメリカ映画は、 彼氏に捨てられた身重の主人公が、新しい土地で新し </p::first-line> い友人たちに助けられながら幸せを掴んでいくという 心温まるストーリになってます。是非一度ご覧になってみてください。 </p>

また、上記の例に span 要素で何か指定したとします。その場合、::first-line 擬似要素が span 要素を分割し、span 要素は一旦閉じられ、直後にまた開始されるという風に考えられます 。架空タグ列で書き換えられたとしたら以下のような感じになります。

<p><p::first-line><span class=""> ナタリー・ポートマン主演の「あなたのために」というアメリカ映画は、 彼氏に捨てられた身重の主人公が、新しい土地で新し </span></p::first-line><span class="""> い友人たちに助けられながら幸せを掴んでいくという 心温まるストーリになってます。是非一度ご覧になってみてください。 </span></p>

要素の最初の行は、ブロックレベルの子孫 (通常フローから外れてないもの) に発生する可能性もあります。

example

<div><p> おはようございます。 </p></div>

上記の例では、div の最初の行は、p の最初の行となります。 ( p 、div 共にブロックレベルとする。)

table-cell、inline-block が指定されている最初の行は、祖先要素の最初の行になることはありません。

example

<div><p style="display: inline-block"> あああ <br> いいい </p> ううう </div>

上記の例では、div の最初の行は " あああ " ではありません。

最初の行に何もない場合もあります。

example

<p><br> First…

上記の例では、p の最初の行に文字が含まれていません。 ( br は HTML4 のデフォルトスタイルを想定）

UA は、架空の開始タグが、最も内側にあるブロックレベル要素中にネスト（入れ子）されているとして振舞うべきと CSS3仕様書には書かれています。

example

<div>
 <p>
  最初の段落
 </p>
 <p>
  二つ目の段落
 </p>
</div>

このときの架空タグ列は以下のような感じになります。

fictional tag

<div>
 <p>
  <div::first-line>
   <p::first-line>
    最初の段落
   </p::first-line>
  </div::first-line>
 </p>
 <p>
  <p::first-line>
   二つ目の段落
  </p::first-line>
 </p>
</div>

最初の行にある子要素の一部は、::first-line 擬似要素に適用可能なプロパティを ::first-line 擬似要素から継承します。 その他のプロパティは、通常の親要素から継承されます。

※ UA（User Agent / ユーザーエージェント）とは、Webサイトへアクセスする際に使用されるプログラムのこと。（ブラウザ）

※ E の斜体は仮の名前です。

上に戻る