CSSのセレクタの設定の仕方について

Question

CSSのセレクタの指定の仕方について質問させていただきます。

navigationで、Hoverしているitemとactiveなitemの色を変えたい時
CSS1のように指定すると色が変わりません。

.nav-link.active, .nav-linkも、ユニークなclass名なのに、
何故CSS2のように親要素のクラスから指定しないとダメなのでしょうか。

素人質問ですみませんが、どうぞよろしくお願いします。(_ _)

.nav-link.active, .nav-link:hover {
  color: #1ebba3;
}

.navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link:hover {
  color: #1ebba3;
}

<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
		<a class="navbar-brand" href="#"><img src="img/nuno.png" alt=""></a>
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
			<span class="navbar-toggler-icon"></span>
		</button>
	
		<div class="collapse navbar-collapse" id="navbarResponsive">
			<ul class="navbar-nav ml-auto">
				<li class="nav-item active">
					<a class="nav-link active" href="#HOME">HOME</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#COURSE">COURSE</a>
				</li>

				<li class="nav-item">
					<a class="nav-link" href="#CONTACT">CONTACT</a>
				</li>
			</ul>
		</div>
</nav>

Comments

[azuapricot]

!important をつけると既存CSSよりも優先されますので覚えておくとよいかもしれません

Answer 1

.nav-link.active, .nav-linkも、ユニークなclass名なのに、

何故CSS2のように親要素のクラスから指定しないとダメなのでしょうか。

おそらく、既存のCSSで.navbar-dark .navbar-nav .nav-linkに対してスタイルがかかっているものと思われます。

上書きするには詳細度を同じ以上まで高める必要があります（.nav-link.activeではクラスが2つしかないので、クラス3つの.navbar-dark .navbar-nav .nav-linkなどが指定されていると負けます）。

Comments

[HelpMe]

ありがとうございます！
詳細度というものがあるんですね。
一人で考えてもわからないままでした。
とっても助かりました。

[takopo]

詳細度を計算するサイトがありますよ
https://specificity.keegan.st/