hover が効かない

前提・実現したいこと

class="beauty"のリスト部分のhoverの色をを変えたい

発生している問題・エラーメッセージ

以下CSSがエラーとなっていますがどのように記述すればよいか分かりません。

.beauty li a:hover {
color: blue;
}

該当のソースコード

[以下html]

<div class="side-container"> <div class="side-title"> <h2>一般歯科</h2> </div> <div class="side-list"> <ul> <li><a href="">虫歯治療</a></li> <li><a href="">歯周病治療</a></li> <li><a href="">入れ歯</a></li> <li><a href="">予防歯科</a></li> </ul> </div> </div> <div class="side-container"> <div class="side-title"> <h2>審美歯科</h2> </div> <div class="side-list"> <ul class="beauty"> <li><a href="">ホワイトニング</a></li> <li><a href="">オールセラミック</a></li> <li><a href="">セラミックインレー</a></li> <li><a href="">PMTC</a></li> </ul> </div> </div>

[以下CSS]
.side-list ul li a:hover {
color: blue;
}
.beauty li a:hover {
color: red;
}

試したこと

上記コードだとblueがhover時に適用されています。
調べましたが分かりません。
コード自体は間違っていない気がします。
指定の仕方が悪いのでしょうか。

当方、現在模写コーディングをしている初心者です。
ご教示いただけますと幸いです。

補足情報（FW/ツールのバージョンなど）

VScodeを使用しています。

行動規範の内容に同意します

回答1件

ベストアンサー

「CSSセレクタの詳細度」の問題です。
例えば以下だと、赤になると思います。

CSS
1/* クラス1つ、タグ3つ */
2.side-list ul li a:hover {
3  color: blue;
4}
5/* クラス2つ、タグ3つ、なので↑に比べて「詳細度」が高い */
6.side-list .beauty ul li a:hover {
7  color: red;
8}