css セレクタ優先度: 要素タグ (hover) と class を併用したい。

Question

前提・実現したいこと

要素 a タグ (疑似クラス:hover) と class セレクタのスタイルを両立する。

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

a タグ内に class セレクタがある場合、hover が効かないことがある。

(セレクタの優先順序によりクラスが優先されているのか、
↓ソースの「English」には hover が効くが、
2 つめの span タグ 「日本語」には hover が効かない。)

class セレクタ項目 n 番目	class 名	content	要素タグ疑似クラス hover (フォント色)
1	”en"	「English」	効く (赤)
2	"caption"	「日本語」	効かない (グレー)

該当のソースコード

<style>
  .en { font-weight:Bold;}
  .caption { font-size:9px; color:grey;}
  a { text-decoration:none; color:black;}
  a:link { color:#000; text-decoration:none; }
  a:visited { color:#000; }
  a:hover { color:#cc141c; }
  a:active { color:#cc141c; !Important;}
</style>

<a href="#">
  <span class="en">English</span><br>
  <span class="caption">日本語</span>
</a> 

試したこと

1. !Important;
2. 記述順序

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

ここにより詳細な情報を記載してください。

Answer 1

効かない理由は、maisumakunさんの回答で指摘ある通りだと。

対策としては下記のように a:hover span に設定するようにすればいいでしょう。

a:hover span { color:#cc141c; }

Comments

[BetterEveryday]

hatena19 さま、
コードを回答いただきましてどうもありがとうございます。
昨日から悩んでいましたので、たいへん助かりました。

Answer 2

こうすれば良いのでは。
a span:hover { color:#cc141c; }

追記
少し勘違いをしました。この回答は投稿者の意図するものではなさそうです。

Comments

[BetterEveryday]

soliste16 さま、
コードを回答いただきまして、また質問意図まで
考慮いただきまして、どうもありがとうございます。
回答いただいた内容で質問した内容が解消できました。

(訂正いただいたように、質問はしていませんでしたが、
「hover 対象を広げたい。(文字のみでなく)」という疑問もありましたので、)
両方解消できた hatena19 さまを回答をベストアンサーにしようと思います。)

Answer 3

(セレクタの優先順序によりクラスが優先されているのか、

いえ、.captionに直接スタイルが指定されている場合、親要素から継承された値より優先されます。これは変えられません。

Comments

[BetterEveryday]

maisumakun さま、
早々に回答いただきましてどうもありがとうございます。
caption タグがあるため、クラス名に「caption」を使用できない、と理解しました。
(初歩的な質問でお手数をお掛けしまして申し訳ございません。)

[maisumakun]

> caption タグがあるため、クラス名に「caption」を使用できない、と理解しました。

いえ、全く違います。

[think49]

https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#Understanding_inheritance
「継承」を調べて下さい。

[BetterEveryday]

再回答ありがとうございます。
(実はお知らせいただいた「caption 直接指定」でキーワード検索してみましたが、
参考になりそうな情報を見つけられずにいるところです。。)

[maisumakun]

「caption」という名前は本質的ではありません。「継承」がキーワードです。

[think49]

https://triple-underscore.github.io/css-cascade-ja.html#inheriting
> 一部のプロパティは、そのプロパティ定義表にて， 継承プロパティ （ inherited property ）であるものと定義される。 これは、カスケード値が無いときは，その値が継承により決定されることを意味する。

他の方の回答も「継承を使用しないセレクタ」で解決しており、根本的な原則は同じです。

[BetterEveryday]

think49 さま、
教科書を 2 種類もお知らせいただきましてどうもありがとうございます。
2 番目の要素に親要素を適用させたい場合は詳細度で勝つ必要がある、と理解しました。

[think49]

@BetterEveryday さん
> 2 番目の要素に親要素を適用させたい場合は詳細度で勝つ必要がある、と理解しました。

「自らが立てた仮説」を実証するコード」を書いてみてください。
https://jsfiddle.net/nfuj10td/1/
期待通りの結果になりますか。

再三の指摘ですが、キーワードは「継承」です。

maisumakun さんの回答「いえ、.captionに直接スタイルが指定されている場合、親要素から継承された値より優先されます。」
私が紹介した引用文「これは、カスケード値が無いときは，その値が継承により決定されることを意味する。」

再読して下さい。

[BetterEveryday]

think49 さま、
再度おふたりの言葉を参照いただいたことにより、

caption クラスでは色指定があるから、a.hover の色指定は効かない (上書きされる)、
en クラスでは色指定がないから、a.hover の色指定が効く(上書きされない)こと、

ちんぷんかんぷんだった、
maisumakun さまの「.captionに直接スタイルが指定されている場合、親要素から継承された値より優先される」
think49 さまの「カスケード値が無いときは，その値が継承により決定される」を理解できました。
--------------------------------------------------------------------------------
さらに、私のために検証コードまで作成いただきましてどうもありがとうございます。
think49 さまのコードにリンクなしの li タグや li:hover スタイルを追加して、やっと以下を理解できました。

「a タグの親は li であり」、
スタイルに継承を指定すると、hover のスタイルは li:hover スタイルに依存する、
スタイルに継承を指定しないと、hover のスタイルは a:hover スタイルに依存する。

この継承の理解が、一昨日から残る他の css 悩みの解消にも役立てられたら、という想いで
今日も取り組んでいこうと思います。
私の理解のために貴重なお時間とお気持ちをいただきまして本当にどうもありがとうございました。