疑似要素の種類
疑似要素を使用することで、要素の一部分に対してスタイルを適用させることができます。
CSS 2では、次の4種類の疑似要素が定義されています。
| 疑似要素 | 説明 |
|---|---|
:first-line |
ブロックレベル要素の1行目のスタイル |
:first-letter |
ブロックレベル要素の先頭1文字のスタイル |
:before |
要素直前の内容に対するスタイル |
:after |
要素直後の内容に対するスタイル |
:beforeと:afterは、contentプロパティと組み合わせて使用します。具体的な指定方法については、要素の前後に内容を追加するをご覧ください。- IE 7以下では、
:beforeと:afterの指定に対応していません。
指定方法
要素名とコロン（ : ）に続けて、疑似要素名を指定します。
例えば、p要素に :first-line を指定する場合は、次のような記述になります。
p:first-line { color: red; }
:first-lineの使用例
疑似要素（:first-line）を、p要素に対して指定した例です。
p:first-line {
font-size: 200%;
font-weight: bold;
}
次の例では、段落の1行目のテキストにスタイルが適用されることになります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
p {
width: 50%;
}
p:first-line {
font-size: 200%;
font-weight: bold;
}
</style>
</head>
<body>
<p>1つ目の段落です。1行目のテキストが ...</p>
<p>2つ目の段落です。1行目のテキストが ...</p>
</body>
</html>
:first-letterの使用例
疑似要素（:first-letter）を、p要素に対して指定した例です。
p:first-letter {
font-size: 300%;
font-weight: bold;
}
次の例では、段落の先頭1文字にスタイルが適用されることになります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
p {
width: 50%;
}
p:first-letter {
font-size: 300%;
font-weight: bold;
}
</style>
</head>
<body>
<p>1つ目の段落です。先頭の1文字が ...</p>
<p>2つ目の段落です。先頭の1文字が ...</p>
</body>
</html>
:beforeと:afterの使用例
疑似要素（:before、:after）を、p要素に対して指定した例です。この2つの疑似要素は、contentプロパティと組み合わせて使用します。（IE 7以下では対応していません）
p:before {
content: "直前";
}
p:after {
content: "直後";
}
次の例では、段落の直前と直後に内容（テキスト）を追加して、それぞれの文字色を指定しています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
p:before {
content: "直前に追加→";
color: red;
}
p:after {
content: "←直後に追加";
color: blue;
}
</style>
</head>
<body>
<p>1つ目の段落です。要素の前後に内容を追加した例です。</p>
<p>2つ目の段落です。要素の前後に内容を追加した例です。</p>
</body>
</html>
- この指定は、IEではバージョン8から対応しています。（ただし、表示モードが標準モードの場合に限ります）
特定の要素にのみ疑似要素を適用させる
要素名に対して疑似要素の指定を行うと、そのタイプの全ての要素に疑似要素の指定内容が適用されてしまいます。
特定の要素にのみ適用させたい場合は、クラス名を加えて指定するか、子孫セレクタで適用範囲を限定します。
クラス名を加えて指定した例
次のように、要素名（p）、ピリオド（ . ）、クラス名（example）、コロン（ : ）、疑似要素、といった順序で記述します。
p.example:first-line { color: red; }
上記のように指定しておくと、example というクラス名が指定されたp要素にのみ、スタイルの指定内容が適用されます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
p { width: 50%; }
p.example:first-line { color: red; }
</style>
</head>
<body>
<p class="example">1つ目の段落です。この段落にスタイルが適用されます。...</p>
<p>2つ目の段落です。この段落には適用されません。...</p>
</body>
</html>
子孫セレクタで適用範囲を限定した例
次のように、クラス名（example）と要素名（p）を半角スペースで区切って記述します。
.example p:first-line { color: red; }
上記のように指定しておくと、example というクラス名が指定された要素内のp要素にのみ、スタイルの指定内容が適用されます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
p { width: 30%; }
div.example p:first-line { color: red; }
</style>
</head>
<body>
<div class="example">
<p>1つ目の段落です。この段落にスタイルが適用されます。...</p>
<p>2つ目の段落です。この段落にスタイルが適用されます。...</p>
</div>
<p>3つ目の段落です。この段落には適用されません。...</p>
</body>
</html>