疑似クラスの種類
疑似クラスを使用することで、要素の状態別にスタイルを適用させることができます。
CSS 2では、次の7種類の疑似クラスが定義されています。
| 疑似クラス | 説明 |
|---|---|
:link |
未訪問リンクのスタイル |
:visited |
訪問済みリンクのスタイル |
:hover |
カーソルが重なった時のスタイル |
:active |
アクティブ時スタイル |
:focus |
フォーカス時のスタイル |
:lang() |
指定された言語のスタイル |
:first-child |
最初の子要素のスタイル |
:linkと:visitedは、a要素に対してのみ指定することができます。- IE 7以下では、
:focusと:lang()の指定に対応していません。 - IE 6以下では、a要素以外に指定された
:hoverと:activeに対応していません。また、:first-childの指定にも対応していません。
指定方法
要素名とコロン（ : ）に続けて、疑似クラス名を指定します。
例えば、a要素に :link を指定する場合は、次のような記述になります。
a:link { color: red; }
要素のタイプを限定しない場合は、次のように要素名を省略して指定することもできます。
:lang(en) { color: red; }
リンクで使用した例
疑似クラスをa要素に対して指定した例です。
この例では、:link 、:visited 、:hover 、:active 、この4種類の疑似クラスを使用しています。
a:link { color: #0000ff; } /* 未訪問のリンク */
a:visited { color: #000080; } /* 訪問済みのリンク */
a:hover { color: #ff0000; } /* ポイント時のリンク */
a:active { color: #ff8000; } /* 選択中のリンク */
- 上記のように、
:link、:visited、:hover、:activeの順で記述する必要があります。
次の例では、リンクの状態別に文字色を指定しています。このスタイルの指定内容は、文書内の全てのリンクテキストに適用されることになります。
<!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">
a:link { color: #0000ff; }
a:visited { color: #000080; }
a:hover { color: #ff0000; }
a:active { color: #ff8000; }
</style>
</head>
<body>
<ul>
<li><a href="../../../index.html">トップページ</a></li>
<li><a href="../../index.html">CSSリファレンス</a></li>
<li><a href="../index.html">CSSの基本</a></li>
</ul>
</body>
</html>
特定の要素にのみ疑似クラスを適用させる
要素名に対して疑似クラスの指定を行うと、そのタイプの全ての要素に疑似クラスの指定内容が適用されてしまいます。
特定の要素にのみ適用させたい場合は、クラス名を加えて指定するか、子孫セレクタで適用範囲を限定します。
クラス名を加えて指定した例
次のように、要素名（a）、ピリオド（ . ）、クラス名（example）、コロン（ : ）、疑似クラス、といった順序で記述します。
a.example:link { color: #0000ff; }
a.example:visited { color: #000080; }
a.example:hover { color: #ff0000; }
a.example:active { color: #ff8000; }
上記のように指定しておくと、example というクラス名が指定されたa要素にのみ、スタイルの指定内容が適用されます。
<!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">
a.example:link { color: #0000ff; }
a.example:visited { color: #000080; }
a.example:hover { color: #ff0000; }
a.example:active { color: #ff8000; }
</style>
</head>
<body>
<ul>
<li><a href="../../../index.html" class="example">このリンクテキストに適用されます</a></li>
<li><a href="../../index.html" class="example">このリンクテキストに適用されます</a></li>
<li><a href="../index.html">このリンクテキストには適用されません</a></li>
</ul>
</body>
</html>
子孫セレクタで適用範囲を限定した例
次のように、クラス名（example）と要素名（a）を半角スペースで区切って記述します。
.example a:link { color: #0000ff; }
.example a:visited { color: #000080; }
.example a:hover { color: #ff0000; }
.example a:active { color: #ff8000; }
上記のように指定しておくと、example というクラス名が指定された要素内のa要素にのみ、スタイルの指定内容が適用されます。
<!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">
ul.example a:link { color: #0000ff; }
ul.example a:visited { color: #000080; }
ul.example a:hover { color: #ff0000; }
ul.example a:active { color: #ff8000; }
</style>
</head>
<body>
<ul class="example">
<li><a href="../../../index.html">このリンクテキストに適用されます</a></li>
<li><a href="../../index.html">このリンクテキストに適用されます</a></li>
</ul>
<ul>
<li><a href="../index.html">このリンクテキストには適用されません</a></li>
</ul>
</body>
</html>
:focusの使用例
疑似クラス（:focus）を、input要素に対して指定した例です。（IE 7以下では対応していません）
input:focus { background-color: #f2f2f2; }
次の例では、入力欄がフォーカスされた時に、その入力欄の背景色が変わるように指定しています。
<!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">
input:focus { background-color: #cccccc; }
</style>
</head>
<body>
<p><input type="text" name="example1" size="30"></p>
<p><input type="text" name="example2" size="30"></p>
<p><input type="text" name="example3" size="30"></p>
</body>
</html>
- この指定は、IEではバージョン8から対応しています。（ただし、表示モードが標準モードの場合に限ります）
:lang()の使用例
疑似クラス（:lang）を使用する場合は、次のように ( ) 内で言語コードを指定します。（IE 7以下では対応していません）
p:lang(en) { color: red; }
次の例では、言語コード（en）が指定された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:lang(en) { color: red; }
</style>
</head>
<body>
<p lang="en">The style is applied to this text</p>
<p lang="ja">このテキストには適用されません</p>
</body>
</html>
- この指定は、IEではバージョン8から対応しています。（ただし、表示モードが標準モードの場合に限ります）
:first-childの使用例
疑似クラス（:first-child）を、p要素に対して指定した例です。（IE 6以下では対応していません）
p:first-child { color: red; }
次のように、子供セレクタ（ > ）を使用して親要素を特定することもできます。
div > p:first-child { color: red; }
次の例では、div要素の子要素として最初に出現したp要素にのみ、スタイルが適用されることになります。子要素として2番目以降に出現した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">
div { margin-bottom: 3em; }
div > p:first-child { color: red; }
</style>
</head>
<body>
<div>
<h1>:first-childの使用例</h1>
<p>このテキストには適用されません</p>
</div>
<div>
<p>このテキストにスタイルが適用されます</p>
<p>このテキストには適用されません</p>
<p>このテキストには適用されません</p>
</div>
<blockquote>
<p>このテキストには適用されません</p>
</blockquote>
</body>
</html>
- この指定は、IEではバージョン7から対応しています。（ただし、表示モードが標準モードの場合に限ります）