BOOK Studio947
狩野祐東・狩野さやか著書

スタイルの上書きについて(第3版p182)

書籍Q&ACategory: スラスラわかるHTML&CSSのきほんスタイルの上書きについて(第3版p182)
takagi asked 10か月 ago

まず<a>タグで、link, visited, hover, activeともオレンジ色に設定しています。その後、class名がnavの場合には、link, visitedだけネイビーに設定しています。aよりも.nav aの方が優先順位が高く上書きされるということですが、そうするとhoverやactiveの場合は上書きがされずにオレンジ色が残るのではないでしょうか。
しかし、実際にはナビゲーションの部分にカーソルを乗せた場合やクリックした場合、オレンジ色にはならずネイビーです。となると、「色の設定をしない」ということを上書きしているのでしょうか。そのように考えると納得はいくのですが、また別の疑問が浮かびます。
.nav aではlinkとvisitedに色の指定をして、hoverとactiveには色の設定をしないという設定をしたことになると思うのですが、その場合にホバーさせた場合、link(or visited)かつhoverになるのでlink(or visited)にhoverが上書きされて、色の設定はしない=デフォルトの色になる、となるのではないかと思えます。しかし現実はlink(or visited)で設定した色になります。
わかりづらい文章になってしまっているかと思いますが、どうか回答をお願いいたします。

1 Answers
狩野 祐東 Staff answered 10か月 ago

ご質問の内容が高度で本書の範囲を超えているため、簡単に回答させていただきます。
:link、:visited、:hover、:active はおそらく理解されているとおり、部分的に状態が重なることから、同レベルの優先順位にあるこれら擬似クラス同士で互いに上書きするようになっています。また、優先順位の低いスタイルは上書きします。

このことから、本書の例でいえば、「.nav a:link」のスタイルを書いた時点で、このスタイルが同レベルの優先順位にあるほかの擬似クラス(:hover、:activeなど)の基準になると考えてください。

takagi replied 10か月 ago

わかりました。ご回答ありがとうございました。