ダイナミック疑似クラス・セレクタ（dynamic pseudo-classes selector）
アセンブラの魔女 ⧫ CSS ⧫ セレクタ ⧫ セレクタの種類 ⧫ ダイナミック疑似クラス・セレクタ

　ダイナミック疑似クラス・セレクタ（dynamic pseudo-classes selector）は、ある要素E がアクティブ、ホバー、フォーカスなどの状態にある時にスタイルを適用します。

E:active
E:hover
E:focus

疑似クラス意味
hover要素がホバー状態
focus要素がフォーカス状態
active要素がアクティブ状態

　「ホバー」とはリンクの上にマウスカーソルがある状態です。「フォーカス」とは、[TAB]キーなどでリンクを選択している状態です。「アクティブ」とはリンクをクリックするためにマウスのボタンを押した状態です。

　アクティブ状態の時、同時にフォーカス状態やホバー状態でもありますので、CSSでは通常、hover疑似クラスやfocus疑似クラスよりも後にactive疑似クラスを置いてactive疑似クラスの定義の優先度を上げます。

　次のCSSコードは、通常は訪問済み、未訪問にかかわらずリンクを黒で表示し、ホバー時は緑、フォーカス時は青、アクティブ時は赤で表示します。

a:link		{color:black;}
a:visited	{color:black;}
a:hover		{color:green;}
a:focus		{color:blue;}
a:active	{color:red;}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ダイナミック疑似クラス・セレクタの使用例</title>
<meta name="description" content="CSSのセレクタの使用例です" />
<meta http-equiv="Content-Style-type" content="text/css">
<link rel="stylesheet" href="dynamic_selector_sample.css" type="text/css">
</head>
<body>
body
<a href="https://books-nekoya.jp/">body/link</a>
</body>
</html>
▼ Property