corns blog

［CSSのTips忘れないうちにメモ］
4種類ある疑似クラス。「link」と「visited」はどちらかの状態しか発生しないが、「hover」と「hover」は補完的な状態にある。そして、「link」「hover」「hover」が同一条件となる場合があるはず。
とすると、起こりえる状態が重なったときに、疑似クラス同士の優先順位は指定できないので、記述した順番にスタイルが適用されることになる。
つまり、疑似クラスには指定する順番が論理的にあってしかるべきかもしれない。

たとえば、a:hoverがa:linkやa:visitedより先に指定されていると、a:hoverで設定したスタイルは次に記述したスタイルで更新され、リンクにカーソルが重なったときに意図した通りに表示されなくなる。
同様に、a:visitedのあとにa:hoverで指定したスタイルは後で記述したスタイルで上書きされ、リンク部分のスタイルが意図しないものになる。

疑似クラスはa:link、a:visited、a:hover、a:active、の順に記述するようにしよう。