first-line擬似要素

TOPページに戻る > CSS

first-line擬似要素

p要素、div要素などブロック要素の1行目のスタイルを変更できます
1行目が一つの要素のようにスタイルを適用できます

使い方（書式）css

要素:first-line { color : red; }

対応ブラウザ

※IE6対応しています

実際の指定方法

一行目のテキストを赤色にしています。他にも文字を大きくしたり、斜体にしたり、背景をつけたり、いろいろできます

cssファイル

p:first-line { color : red; }

html部分

<p>先頭の行がfirst-letter擬似クラスでスタイルが変わってます
<br>改行して2行目</p>

実際の表示

先頭の行がfirst-letter擬似クラスでスタイルが変わってます
改行して2行目

要素を属性セレクタ、classセレクタ、idセレクタで絞り込む

first-line擬似要素はセレクタと併用できます
適用箇所を限定したい場合は最初の要素にclassセレクタ、idセレクタ、属性セレクタをつけます（今回はclassセレクタで）
※html要素に属性がついている場合は属性セレクタが使えるのでソースがすっきりします

cssファイル

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

html部分

<p class="hoge">先頭の行がfirst-line擬似クラスでスタイルが変わってます
<br>改行して2行目</p>