1
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

[めも]cssで、aタグに付ける:visitedなどの順番に気を付けよう![初級編]

Last updated at Posted at 2017-03-12

#期待通りの動作をする順番は

:link
:visited
:hover
:active

忘れていると、はまります!

順番をあえて変えてみるのも・・というのは、(実質的に使われない)無駄なセレクタが増えるので、実験程度に。

#なぜ、この順番?
後ろの方が優先されるので、

linkだけど、visitできるよ!
visitedだけど、hoverできるよ!
hover状態だけど、activeになれるよ!

ということ。

・・・後から足した時など、うっかり変な位置に書いてたりしますよね。

今日の教訓:単純なトラップほど怖い。

##そんなの大丈夫!常識でしょ?と思った時はきっと・・
罠にはまる1歩手前。

a:hoverとかa:activeを設定した後に、#id名:visitedとか.クラス名:visitedとか書いていませんか?

ここ重要!
#id名:visitedと書いた後には、
#id名:hover#id名:activeも書きましょう。
(クラスの時も、似た感じでね!)

書かないと・・
a:hoverしたよ! だが#id名:visitedになりたいんだ。
という感じに、おかしな事になります。要注意。

#参考
MDN - :visited

1
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?