擬似クラス

擬似クラス(Pseudo-classes)

  • 要素の性質スタイルを適用させたい場合に使います
  • 主に「a要素」のリンク時のカーソルの表示状態を設定します

疑似クラスには次の6種類があります。

lang 指定された言語のスタイル
link 通常リンク(未アクセス)のスタイル
visited アクセス済みリンクのスタイル
hover ポイント時のスタイル
focus フォーカス時のスタイル
active アクティブ時のスタイル

  1. link(未訪問)
  2. visited(訪問済み)
  3. hover(カーソルがリンクに重なったとき)
  4. active(リンクに対してアクティブな瞬間)
  • リンクに疑似クラスを使用する際には、link → visited → hover → active 、といった順序で記述する必要があります。

の4つの疑似クラスの前には「:」コロンをつけます。

a:link {
  color: #0000fe;
}
a:visited {
  color: #880088;
}
a:hover {
  color: #ff6600;
}
a:active {
  color: #ff000;
}

演習課題

  • リンクの文字色(擬似クラス)

https://cdn-ak.f.st-hatena.com/images/fotolife/w/web-design-advance/20120415/20120415194257.jpg

<body>
<nav class="gnav">
<ul>
<li><a href="#">LINK-link-coral</a></li>
<li><a href="#">LINK-visited-turquoise</a></li>
<li><a href="#">LINK-hover-skyblue</a></li>
<li><a href="#">LINK-active-lawngreen</a></li>
</ul>
</nav>
</body>
広告を非表示にする

求職者支援訓練 フェリカテクニカルアカデミー