CSS :アクティブセレクター
例
アクティブなリンクを選択してスタイルを設定します。
a:active
{
background-color: yellow;
}
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
セレクターは、:active
アクティブなリンクを選択してスタイルを設定するために使用されます。
リンクをクリックするとアクティブになります。
ヒント:: activeセレクターは、リンクだけでなく、すべての要素で使用できます。
ヒント::linkセレクターを使用して未訪問ページへのリンクのスタイルを設定し、 :visitedセレクターを使用して訪問済みページへのリンクのスタイルを設定し、 :hoverセレクターを使用してそれらの上にマウスを置いたときにリンクのスタイルを設定します。
注:: activeを有効にするには、CSS定義で:hover(存在する場合)の後に来る必要があります。
バージョン: | CSS1 |
---|
ブラウザのサポート
表の数字は、セレクターを完全にサポートする最初のブラウザーのバージョンを示しています。
Selector | |||||
---|---|---|---|---|---|
:active | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
CSS構文
:active {
css declarations;
}
その他の例
例
クリックしたときに、<p>、<h1>、および<a>要素を選択してスタイルを設定します。
p:active, h1:active, a:active {
background-color: yellow;
}
例
未訪問、訪問済み、ホバー、アクティブなリンクを選択してスタイルを設定します。
/* unvisited link */
a:link {
color: green;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: red;
}
/* selected link */
a:active {
color: yellow;
}
例
さまざまなスタイルのスタイルリンク:
a.ex1:hover, a.ex1:active {
color: red;
}
a.ex2:hover, a.ex2:active {
font-size: 150%;
}
関連ページ
CSSチュートリアル:CSSリンク
CSSチュートリアル:CSS疑似クラス