<a>タグ内の<p>をhover時に色変更する方法

Question

メニューボタンの中のひとつだけ、<a>タグ内の<p>もhover時に色を変更したいのですが、
できなくて困っています。

下記コードのクラス名（contact）の「お問い合わせ」「Contact」という文言を同時にhoverで変更したいのですが、
「お問い合わせ」しか色が変わりません。

「お問い合わせ」「Contact」という文言を同時に変更する方法はあるのでしょうか。
お知恵をお借りできませんでしょうか。
よろしくお願いいたします。

<nav class="main-nav">
		<ul class="wrapper">
		  <li><a href="#">メニュー１<p class="nav">メニュー説明</p></a></li>
		  <li><a href="#">メニュー２<p class="nav">メニュー説明</p></a></li>
	      　　<li><a href="#">メニュー３<p class="nav">メニュー説明</p></a></li>
		  <li class="contact"><a href="#">お問い合わせ<p class="contact-p">Contact</p></a></li>	
		</ul>
</nav>

.main-nav ul li a{
	display: block;
	padding-top:13px;
	padding-bottom:8px;
	padding-left: 8px;
	padding-right:8px;
	color:#fff;
	transition: all 0.5s;
}

.main-nav ul li a:hover{
	color:#00b259;
	background-color: #fff;
}


.main-nav ul li p.nav{
	color:#ffdc73;
	font-size:0.7rem;
	margin-top: -3px;
	font-weight: normal;
}

.contact{
	background-color: #ffc926;
	display: inline-block;
    position: relative;
	color:#fff;
}


.main-nav ul li p.contact-p{
	color:#fff;
	font-size:0.7rem;
	margin-top: -3px;
	font-weight: normal;
}

Comments

[m.ts10806]

ファイルが別であればコードブロックをわけていただいたほうが確認しやすくなります。

[shiratama_0826]

変更いたしました。よろしくお願いいたします。

Answer 1

基本は後勝ちなので後から指定された.main-nav ul li p.contact-p{へのcolor指定が優先されます。
同じ色なら指定しなくていいのでは？
親と違う色にしたいのでしたら別途:hoverを設ける必要があります。

Comments

[shiratama_0826]

違う色にしたかったので、おっしゃる通りhoverを入れたら変わりました！ありがとうございます。

[m.ts10806]

いえ、最初に書いているようにp.contact-pに指定したcolorを抜くだけで対応できます（確認済み）

Answer 2

一番下の.main-nav ul li p.contact-pで　colorを#fffと指定しているからではないでしょうか。
それよりも下に例えば下記で色は変わりませんか？（色は適宜変更）
.main-nav ul li a:hover p.contact-p{
color:#ffdc73;
}

Comments

[shiratama_0826]

変わりました‥！！大変助かりました。お手数おかけしました。ありがとうございます。