CSSの疑似クラス

CSS HTML

疑似クラスの種類は6種類あるのだが本日学んだのは4種類

  • link(未訪問)
  • visited(訪問済み)
  • hover(カーソルがリンクに重なったとき)
  • active(リンクに対してアクティブな瞬間)

これらには記述する順番があります。
link→visited→hover→activeの順番です。

この4種類を使ってリンクを作ってみた。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>疑似クラスの練習</title>
<style>
ul {
    list-style-type: none;
}
li a:link {
    color: green;
}
li a:visited {
    color: blue;
}
li a:hover {
    color: purple;
}
li a:active {
    color: black;
}   
</style>
</head>
<body>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">visited</a></li>
<li><a href="#">hover</a></li>
<li><a href="#">active</a></li>
</ul>    
</body>
</html>

f:id:retail:20150327215416p:plain

で上手く出来ました。