Simple HTMLHTMLリファレンス

Main Menu

おすすめリンク

Site Info.

HTMLリファレンス

CSSリファレンス

その他の記事

CSSリファレンス インデックス

スポンサーリンク

CSSリファレンス

擬似要素Pseudo-elementsTOPCSSSelectorPseudo-element

  1. E:first-letter:first-letter擬似要素
  2. E:first-line:first-line擬似要素
  3. E:after:after擬似要素
  4. E:before:before擬似要素

first-letter 擬似要素The :first-letter pseudo-element

書式CSSバージョン個別性W3C 仕様書
E:first-letterCSS2.11CR
擬似要素について

first-letter擬似要素は、指定した要素のテキストコンテンツの1文字目に対してスタイルを適用するためのセレクタです。印刷技術におけるイニシャルキャップやドロップキャップに相当します。

指定可能な対象要素について

first-letter擬似要素では、指定可能な要素が以下のものに限定されています。

  • ブロックレベル要素
  • インラインブロックレベル要素
  • list-item要素
  • table-caption要素
  • table-cell要素
指定可能なプロパティについて

first-letter擬似要素では、指定可能なプロパティが以下のものに限定されています。

  • BOX-MODEL関連プロパティ(background, border, margin, padding)
  • テキスト関連プロパティ(color, text-decoration, line-height, text-transform, text-shadow)
  • vertical-alignプロパティ(float:none指定時)
  • 配置関連プロパティ(float, clear)
要素の配置について

first-letter擬似要素が適用された部位はインラインブロックとして生成されるため、floatプロパティによる配置もインラインブロックと同様の扱いを受けます。

first-letter疑似要素のサンプル

<p>This is the source of our confidence - the knowledge that God calls on us to
 shape an uncertain destiny.</p>
p:first-letter	{
		font-weight:bold;
		font-size:2em;
		float:left;
		}

This is the source of our confidence - the knowledge that God calls on us to shape an uncertain destiny.

スポンサーリンク
Copyright (C) 2010 Simple HTML. All Rights Reserved.