WEB技術の辞書・解説・使用例

TOP > CSS >  CSS辞典 > :active
:active  リンク 

クリック時のリンクの見栄えを変更する。

このエントリーをはてなブックマークに追加

CSSは後に記述されたものが優先して適用されます。a:linkの指定を最後に記述しないように注意してください。

書式

(例) a:active {color:#cc0000; background-color:pink;}

リンクに関するそのほかのクラス。

:link
　未訪問リンクのスタイルを設定。
:visited
　訪問済みリンクのスタイルを設定。
:hover
　マウスオーバー時のスタイルを設定。
:active
　クリックされてから離されるまでの間のスタイルを設定。

CSSファイル

a:link {color:#0000ff;} /*未訪問のリンクの色*/
a:visited {color:#00ccff;} /*訪問済みのリンクの色*/
a:hover {color:#ffffff; background:#0000cc;} /*カーソルが乗っているリンクの色*/
a:active {color:#ffff00;} /*クリック中のリンクの色*/

.sample a:link {color:#ff0000;font-weight:bold;}
.sample a:visited {color:#ffcc00;}
.sample a:hover {color:#ffffff; background:#cc0000;}
.sample a:active {color:#cc0000;}
.sample p:hover {background-color:pink;}

HTML

<a href="/">①TOPにリンクしています。選択してみてください</a>
<div class="sample"><a href="/">②TOPにリンクしています。選択してみてください</a></div>
<div class="sample"><p>③p:hoverです。選択してみてください</p></div>

実行結果

①TOPにリンクしています。選択してみてください
②TOPにリンクしています。選択してみてください

③p:hoverです。選択してみてください