a(アンカータグ)タグ 擬似クラスについて

aタグに用いる擬似要素として、挙げられるのが…

  1. :link 未訪問リンク
  2. :visited 訪問済みリンク
  3. :hover カーソルが重なった時
  4. :active クリックしてから離される時まで

擬似クラスはセレクタに続けて指定します。半角スペースを入れると無効になります。

擬似クラスには、優先順位があります。(上記の順番で!!)

HTML
<p><a href=”#”>リンクテキスト</a></p>

css
a:link {・・・
}
a:visited {・・・
}
a:hover {・・・
}
a:active {・・・
}

:visited擬似クラスは、ブラウザに履歴が残っていると、色を変更しても確認はできません。

実際の制作では:link、:activeは指定せず下記のようにa要素と:visitedと:hoverのみで指定するケースが多くなっているそうです。

:visitedを指定しない場合はa要素の指定と同じになります。

:hover擬似クラスはa要素以外にも使用できます。主にJavascriptというプログラムと併用して利用される場合があるそうです。

最後に今回参考にさせて頂いた、サイト

aタグ内の画像の枠線について
aタグでimgタグを囲むと古いバージョンのブラウザでは1pxの青色のborderが付きます。これはブラウザのデフォルトcssでborderプロパティが設定されているためです。リセットCSSであらかじめimg要素のborderをなしに設定しておきます。

もりけん塾
もりけん先生ブログ

コメント