CSS入門 | CSSセレクター | 動的疑似クラス

CSS動的疑似クラス

疑似クラス	説明
`:link`	ユーザーがまだ一度もこのリンク先ページを訪問していない状態を選択する。既定状態である。
`:visited`	ユーザーが一度でもこのリンク先ページを訪問した状態を選択する。
`:hover`	ユーザーのマウスカーソルがリンク上にある状態を選択する。
`:active`	ユーザーがマウスでリンクをクリックしている状態を選択する。
`:focus`	フォーカスを持つinput要素をすべて選択する。

動的疑似クラス

CSSで使用できる動的疑似クラスは次のとおりである。

:link
:visited
:hover
:active
:focus

動的疑似クラスを使用すると、リンクの状態に応じてそれぞれ別のスタイルを設定できる。

<style>
    a:link {color: orange;}
    a:visited {color: gray;}
    a:hover {color: blue;}
    a:active {color: red;}
    div:hover { background-color: blue; color: white; }
</style>

リンクの状態

リンクには合計5つの状態があり、それぞれの状態に別のスタイルを適用できる。

link: リンクの既定状態であり、ユーザーがまだ一度もこのリンク先ページを訪問していない状態である。
visited: ユーザーが一度でもこのリンク先ページを訪問した状態である。
hover: ユーザーのマウスカーソルがリンク上にある状態である。
active: ユーザーがマウスでリンクをクリックしている状態である。
focus: キーボードやマウスのイベント、または別の方法で該当要素がフォーカスを持っている状態である。

:hoverは必ず:linkと:visitedが先に定義された後に定義されてこそ正常に動作する。 :activeは必ず:hoverが先に定義された後に定義されてこそ正常に動作する。

<style>
    input { border: 3px solid #FFEFD5; transition: 0.5s; }
    input:focus { border: 3px solid #CD853F; }
</style>