::first-lineとは、選択した要素の最初の行にスタイルを指定するために使うCSS擬似要素である。

書式

指定した要素タイプの最初の行

element::first-line { properties }

指定した要素タイプのうち、指定したクラスを持つ要素の最初の行

element.class::first-line { properties }

指定したクラスを持つ要素の最初の行

.class::first-line { properties }

指定したIDの要素の最初の行

#id::first-line { properties }

<p class="example">と</p> に囲まれた文字列のうち、最初の1行だけを赤色にする例を示す。

CSS:

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

HTML:

<p class="example">
吾輩は猫である。
名前はまだ無い。
どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。
しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
この書生というのは時々我々を捕つかまえて煮にて食うという話である。
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
</p>

表示:

吾輩は猫である。 名前はまだ無い。 どこで生れたかとんと見当がつかぬ。 何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 吾輩はここで始めて人間というものを見た。 しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。 この書生というのは時々我々を捕つかまえて煮にて食うという話である。 しかしその当時は何という考もなかったから別段恐しいとも思わなかった。

このエントリーをはてなブックマークに追加
スポンサーリンク