この記事では、CSSでよく使用される疑似クラスの:link、:visited、:hover、:activeについて、
:link,:visited,:hover,:activeの順番の重要性:link,:visited,:hover,:activeの順番の覚え方
などを分かりやすく説明するように心掛けています。ご参考になれば幸いです。
:link, :visited, :hover, :activeの順番
CSSでよく使用される疑似クラスには:link、:visited、:hover、:activeがあります。これらの疑似クラスは状態を表現しており、例えば、CSSでa要素のリンクをデザインする際、以下に示すように使用します。
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: red;
}
a:active {
color: green;
}上記に示した4つの疑似クラスは以下に示す順番で記述する必要があります。
:link- 訪問していないリンクのスタイル。
:visited- 訪問したことのあるリンクのスタイル。
:hover- ユーザーがリンクの上にマウスカーソルを置いたときに適用されるスタイル。
:active- ユーザーがリンクをクリックしている間に適用されるスタイル。
:link、:visited、:hover、:activeの順番を守らないと、「:hoverのスタイルが適用されない！」「リンクに訪問済なのに:visitedのスタイルが適用されない！」などの意図しない動作を引き起こします。
なぜこの順番が重要なのか
CSSでは、同じ要素に対して複数のスタイルが適用される場合、基本的には後に書かれたルールが優先されます。これは「カスケーディングルール」と呼ばれるCSSの基本原則の一つです。
例えば、:hoverを:linkや:visitedよりも前に書くと、ユーザーがリンクの上にマウスカーソルを置いてもスタイルが適用されなくなります。:hoverを:linkや:visitedよりも後に書くことで、リンクが未訪問または訪問済みであるかに関わらず、ユーザーがリンクの上にマウスカーソルを置いたときに:hoverスタイルが適用されることが保証されるようになります。
:link, :visited, :hover, :activeの順番の覚え方
:link、:visited、:hover、:activeの順番を海外ではlink-visited-hover-activeの頭文字を取ってLVHAを覚えたりします。
または、「LOVE(LV) and HATE(HA)」(←愛と憎しみ)と覚えたりします。
本記事のまとめ
この記事では、CSSでよく使用される疑似クラスの:link、:visited、:hover、:activeについて、以下の内容を説明しました。
:link,:visited,:hover,:activeの順番の重要性:link,:visited,:hover,:activeの順番の覚え方
お読み頂きありがとうございました。