リンクと疑似クラス

擬似クラス(:)

ハイパーリンクであるa要素(anchor)のスタイルの定義には、 疑似クラスと呼ばれる特殊なクラスが用いられます。

a { color: pink }   /* リンクされた文字 */
a:link { color: red }   /* 未訪問のリンク */
a:visited { color: blue }   /* 訪問済のリンク */
a:active { color: lime }   /* アクティブなリンク(マウスのクリック中) */
a:hover { background: #ffa }   /* マウスが上に来た時のリンク */

普通のクラスに似ていますが、「.」ではなく「:」であるところが異なります。 疑似クラスはHTMLのソースには現れず、Webブラウザが動的に参照する特別なクラスです。 また、疑似クラスは通常のクラスと同時に指定することができます。 a.myclass:visited などとなります。

クラス(.)の擬似クラス(:)

a.クラス名 { color: pink; text-decoration:underline; }   /* リンクされた文字 */
a.クラス名:link { color: red; text-decoration:underline; }   /* 未訪問のリンク */
a.クラス名:visited { color: blue; text-decoration:underline; }   /* 訪問済のリンク */
a.クラス名:active { color: lime; text-decoration:underline; }   /* アクティブなリンク(マウスのクリック中) */
a.クラス名:hover { background: #ffa; text-decoration:underline; }   /* マウスが上に来た時のリンク */