1文字目に適用させる場合
ブロックレベル要素の先頭の1文字目だけに適用させたい場合は、下の書式のように指定します。書式の「適用先」部分には、要素名の他にクラスやIDなども指定できます。
「:first-letter」のスタイルとして使用できるのは、以下のプロパティです。
colorプロパティ background関連プロパティ margin関連プロパティ padding関連プロパティ border関連プロパティ floatプロパティ clearプロパティ font関連プロパティ line-heightプロパティ text-decorationプロパティ text-transformプロパティ vertical-alignプロパティ(floatプロパティの値が「none」の場合のみ)
CSSソース
h1 {
font-family: "Arial Black", sans-serif
}
h1:first-letter {
font-size: 1.2em;
color: #339900;
background: #ffffff
}HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>1文字目の色を変える</title>
<link href="../assets/style_sheets/02-05.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>First letter</h1>
</body>
</html>