[新着] Webテンプレートを仮オープンしました
疑似クラスには次の6種類があります。
| link | 通常リンク（未アクセス）のスタイル |
| visited | アクセス済みリンクのスタイル |
| hover | ポイント時のスタイル |
| active | アクティブ時のスタイル |
| focus | フォーカス時のスタイル |
| lang | 指定された言語のスタイル |
疑似クラスを使用することにより、要素の状態別にスタイルを指定することができます。
※focus と lang の指定は、IEでは対応していません。（IE6で確認）
要素名とコロン（ : ）に続けて、疑似クラスを記述します。
例えば、a要素に link を指定する場合は、次のような記述になります。
a:link { color: red; }
上記の例では、「通常リンク」の文字色を赤に指定しています。
疑似クラスをリンク部分（a要素）で使用した場合のサンプルです。
この例では、link 、 visited 、 hover 、 active 、この4種類の疑似クラスを使用しています。
a:link { color: #0000ff; } /* 通常のリンク */
a:visited { color: #0000a0; } /* アクセス済みのリンク */
a:hover { color: #ff0000; } /* ポイント時のリンク */
a:active { color: #ffff00; } /* アクティブ時のリンク */
上記の例では、リンクの状態別に文字色を指定しています。このスタイルの指定内容は、ページ内の全てのリンク文字に適用されます。
リンクに疑似クラスを使用する際には、link → visited → hover → active 、といった順序で記述する必要があります。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
a:link { color: #0000ff; }
a:visited { color: #0000a0; }
a:hover { color: #ff0000; }
a:active { color: #ffff00; }
-->
</style>
</head>
<body>
<ul>
<li><a href="../../index.html">トップページ</a></li>
<li><a href="../index.html">スタイルシート</a></li>
<li><a href="index.html">スタイルシートの基本</a></li>
</ul>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
要素名に対して疑似クラスの指定を行うと、その種類の要素全てに対して疑似クラスの指定内容が適用されてしまいます。（例えば、a要素を使った疑似クラスの指定では、ページ内にある全てのリンクでその指定内容が適用されます。）
これを、部分的に適用させたい場合（例えばメニュー部分のリンクにのみ疑似クラスを使用したい場合等）には、通常のクラス名を加えて指定を行うか、入れ子にした指定を行います。
【クラス名を含めて指定する場合】
example というクラス名を加えた例
a.example:link { color: #0000ff; }
a.example:visited { color: #0000a0; }
a.example:hover { color: #ff0000; }
a.example:active { color: #ffff00; }
要素名（a）、ピリオド（ . ）、クラス名（example）、コロン（ : ）、疑似クラス、といった順番で記述します。
上記のように指定しておくと、example というクラス名が指定されたa要素にのみ、スタイルの指定内容が適用されます。
【クラス名を含めて指定した場合の例】
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
a.example:link { color: #0000ff; }
a.example:visited { color: #0000a0; }
a.example:hover { color: #ff0000; }
a.example:active { color: #ffff00; }
-->
</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 というクラス名を使用した例
.example a:link { color: #0000ff; }
.example a:visited { color: #0000a0; }
.example a:hover { color: #ff0000; }
.example a:active { color: #ffff00; }
クラス名（example）と要素名（a）の間には、半角のスペースが入ります。
上記のように指定しておくと、example というクラス名が指定された要素内のa要素にのみ、スタイルの指定内容が適用されます。
【入れ子に指定した場合の例】
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
.example a:link { color: #0000ff; }
.example a:visited { color: #0000a0; }
.example a:hover { color: #ff0000; }
.example a:active { color: #ffff00; }
-->
</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）を、フォーム内のinput要素で使用した場合のサンプルです。（IEでは対応していません）
この例では、入力欄が選択された場合に、その入力欄の背景色が変化するように指定しています。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
input:focus { background-color: #f2f2f2; }
-->
</style>
</head>
<body>
<form method="POST" action="sample.cgi">
<input type="text" name="name">
<br>
<input type="text" name="address">
<br>
<input type="text" name="email">
</form>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
疑似クラス（lang）を使用する場合は、次のように言語コードを指定します。（IEでは対応していません）
p:lang(en) { color: red; }
langの後に(言語コード)を記述します。
この例では、言語コード（en）が指定されたp要素内のテキストを、赤く表示するように指定しています。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
p:lang(en) { color: red; }
-->
</style>
</head>
<body>
<p lang="en">Color Red Text</p>
<p lang="ja">この文字には適用されません</p>
<p>この文字には適用されません</p>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
