擬似クラス

テキストリンク

• テキストリンクの色はブラウザのCSS初期値で「青色」になっている。
• リンクの装飾はユーザーが一目で分かるようにする事が大切。
• リンク色はデザインや配色などの統一感を考慮する。

リンクの色（擬似クラス：Pseudo-classes）

• 条件によって違うスタイルを適用できるのが、擬似クラス。
• 主として「a要素」はリンク時のカーソルの表示状態を設定するのに使う。aタグはリンクの色や見た目を修飾する為のタグ。そのリンクの状態によって別々の修飾をする。

1. link（リンク未訪問のとき）　　
2. visited（リンク訪問済みのとき）
3. hover（リンクにマウスオーバー時）
4. active（リンククリック時）

CSSは先の記述から読み込まれ後の記述に上書きされるから、上記の順で記述しなければならない。

　hover マウスオーバー時にリンク色が変化している

　visited リンク済みである事をターコイズ色で明示している

擬似クラスの記述

擬似クラスの前には「:」コロンをつける。

a:link {
　color: coral;
}
a:visited {
　color: turquoise;
}
a:hover {
　color: skyblue;
}
a:active {
　color: lawngreen;
}
 

子孫セレクタによりリストに適用

li a:link {
  color : #0000FF ;
  text-decoration : none ;
}
li a:visted {
  color : #336699 ;
  text-decoration : none ;
}
li a:hover {
  color : #FF0000 ;
　text-decoration : none ;
}
li a:active {
  color : #FF6600 ;
  text-decoration : none ;
}