リンクの擬似クラス

a要素のリンクで指定できる擬似クラスについて解説します。

この記事のポイント

リンクの状態にあわせた擬似クラスが分かる

リンクの状態にあわせてスタイルを適用するための擬似クラス

Webサイトで使用頻度の高いリンクですが、リンクの状態別（未クリック、ホバーなど）でフォントの色を変えるなどスタイルを適用することは多くあります。
今回はこのリンクの状態別でスタイルを適用するために用意された擬似クラスをご紹介します。

リンクには、次の4つの擬似クラスが用意されています。

未クリック（:link） – まだクリックされていないリンク
クリック済み(:link) – すでにクリックされたことのあるリンク
マウスオン or ホバー(:hover) – リンクの上にマウスカーソルが乗っている状態
アクティブ(:active) – リンクがクリック（タップ）されている状態

これらの全ての状態に対し、それぞれスタイルを指定することができます。

リンクへのスタイル適用について、より具体的には

擬似クラスを使ったコード例

リンクの各状態へスタイルを適用してみます。

リンクの擬似クラスへのスタイル適用例

<style>
.btn a {
	display: inline-block;
	padding: 5px 30px;
	border: 2px solid #4da0e7;
	border-radius: 5px;
	color: #4da0e7;
	text-decoration: none;
	-webkit-tap-highlight-color: rgba( 77, 160, 231, 1.0);
}
.btn a:link {
	color: #4da0e7;
	border-color: #4da0e7;
}
.btn a:visited {
	color: #00549c;
	border-color: #00549c;
}
.btn a:hover {
	color: #fff;
	background: #4da0e7;
}
.btn a:active {
	border-color: #00549c;
}
</style>
<p class="btn"><a href="#">リンク</a></p>

まず、リンクが表示された状態（a:link）は次の表示になります。