Last-Modified: 2021/02/11

CSSのリンクの擬似クラス【現役エンジニアが解説】

PROGRAM

今回は、CSSのリンクの擬似クラスについて、未訪問リンクの指定と訪問済みリンクの指定に分け、簡単に解説していきます。

未訪問リンクの指定

未訪問リンクを指定するには、:linkの擬似クラスを使います。

要素:linkとすることによって、要素の未訪問リンクを指定できます。

a:link{
    color:red;
}

上記のコードでは、全てのa要素のうち、未訪問の要素の文字色を赤色にしています。

訪問済みリンクの指定

訪問済みリンクの指定には、:visitedの擬似クラスを使用します。

要素:visitedと書くことで、要素の訪問済みのリンクのみを指定することが可能です。

a:visited{
    color:green;
}

上記のコードでは、全てのa要素の中で、訪問済みの要素のみ、文字色を緑色にしています。

その他の状態のリンクの指定

カーソルが乗っている状態のリンクの指定の場合、:hoverの擬似クラスを用います。

また、:activeの擬似クラスを使うと、クリック状態のリンクを指定することができます。

/* カーソルが乗っている状態 */
a:hover{
    background-color:red;
}
/* クリックされている状態 */
a:active{
    background-color:green;
}

上記のコードでは、全てのa要素に対し、カーソルが乗っている状態とクリックされている状態の要素の背景色をそれぞれ赤色と緑色にしています。

• facebook
• Tweet
• Read Later