HTML & CSS

最終更新日:
公開日:

基礎

CSS

リンクの擬似クラス

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

この記事のポイント

  • 未クリック時、マウスホバー、クリック中などリンクの状態にあわせた擬似クラスを使ってCSSを制御する

目次

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

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

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

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

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

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

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

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

.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;
}

HTML コード例

<p class="btn"><a href="#">リンク</a></p>

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

まだ押されていないリンク
まだ押されていないリンク

続いて、マウスカーソルがリンクの上にある状態(a:hover)の表示です。

:hover状態のリンク
:hover状態のリンク

その次は、リンクがクリックされたときの状態(a:active)の表示です。
先ほどのマウスオン(ホバー)状態に加えて、ボタンの枠線が濃い青に変わります。

:active状態のリンク
:active状態のリンク

最後に、すでに押されたことのあるリンク(a:visited)の表示です。

すでに押されたリンク
hoverすでに押されたリンク

以上の4つが、リンクへのスタイル指定で使う擬似クラスになります。

そしてさらにもう1つ、スマホ/タブレットなどリンクがタッチされた時の背景色を指定することができる-webkit-tap-highlight-colorプロパティをご紹介します。

スマホでリンクがタップされた時の例
スマホでリンクがタップされた時の例

こちらのプロパティは、マウスオン(ホバー)状態がない端末でリンクが押された時のために指定します。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。