CSS :active 伪类

定義と使用法

CSS :active 仮クラスは、ユーザーがアクティブにしている要素のスタイルを選択および設定するために使用されます。

:active 仮クラスは最もよく使用される <a> および <button> 要素。ユーザーがリンクをクリックすると、リンクが活性化されます；ボタンも同じです。

ヒント：使用 :link 未訪問ページのリンクのスタイルを設定するには、 :visited 訪問済みページのリンクのスタイルを設定するには、 :hover ホバー時のリンクのスタイルを設定します。

注意：CSS 定義では、:active 以下に配置する必要があります :hover（存在する場合）その後のみ有効になります！

インスタンス

例 1

活性化されたリンクのスタイルを選択および設定します：

a:active {
  background-color: yellow;
}

実際に試してみてください

例 2

クリック時の <button> スタイルを選択および設定します：

button:active {
  background-color: pink;
}

実際に試してみてください

例 3

クリック時の <p>、<h1>、<a> 要素のスタイルを選択および設定します：

p:active, h1:active, a:active {
  background-color: yellow;
}

実際に試してみてください

例 4

未訪問、訪問済み、ホバー、活性化されたリンクのスタイルを選択および設定します：

/* ビジットされていないリンク */
a:link {
  color: green;
}
/* ビジットされたリンク */
a:visited {
  color: green;
}
/* マウスオーバーされたリンク */
a:hover {
  color: red;
}
/* 活性化されたリンク */
a:active {
  color: yellow;
}

実際に試してみてください

例 5

リンクに異なるスタイルを設定します：

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

実際に試してみてください

CSS 文法

:active {
  css宣言;
}

技術的詳細

ブラウザのサポート

テーブルの数字は、その仮クラスを完全にサポートする最初のブラウザのバージョンを指定しています。

関連ページ

チュートリアル：CSS リンク

チュートリアル：CSS ボタン

チュートリアル：CSS 仮クラス