CSS3 ::first-line疑似要素セレクタの確認

::first-line疑似要素は、指定する要素のCSSのレイアウトが済んだところで、１行目部分を抽出し、::first-line疑似要素で指定するスタイルを適用します。サンプル（１）では、textareaの１行目部分のテキストを色を赤にしています。textareaの右下をドラッグしてサイズを操作し、文字数が変わっても１行目のの色は同様に赤くなります。

サンプル（２−１）は、親のdiv要素の中に、（１）で使ったテキストと同じものを２つに分けてそれぞれspan要素でくくっています。::first-line疑似要素は、親のdivに対して指定し、１行目部分のテキストを緑にしています。インラインのspan子要素は１つ目が折り返していますが、divにとっての１行目が緑になっています。

サンプル（２−２）は、（２−１）の横サイズだけを変えたものです。span子要素は１つ目では表示が足らず、２つ目がその後に続いて１行目を形成しています。この場合も、子要素の個数に関係なく、divにとっての１行目が緑になっています。

サンプル（１）のhtmlソース

<textarea>    
    野ねずみははじめ込みがいるだ。川は二はじい工合のようが思うてくださいまし。ボーは口楽器たりそれに教えるてやるまし。おっかさんは楽長にとてもと云いて包みを猫のようへはねあがって手へ泣いてまるで赤をしていた。
</textarea>

サンプル（１）のCSSソース

 /*１行目のテキストの色を赤に*/
  textarea::first-line {
	color:red;
	}

サンプル（１）textarea

サンプル（２−１）のhtmlソース

<div id="sample">
    <span>野ねずみははじめ込みがいるだ。川は二はじい工合のようが思うてくださいまし。</span>
    <span>ボーは口楽器たりそれに教えるてやるまし。おっかさんは楽長にとてもと云いて包みを猫のようへはねあがって手へ泣いてまるで赤をしていた。</span>
</div>

サンプル（２−１）のCSSソース

 /*１行目のテキストの色を緑に*/
  div #sample::first-line, div #sample2::first-line {
      color:green; 
    }

サンプル（２−１）２つのspan要素を内包したdiv要素（width:400px）