CSSのセレクタの指定の仕方について質問させていただきます。
navigationで、Hoverしているitemとactiveなitemの色を変えたい時
CSS1のように指定すると色が変わりません。
.nav-link.active, .nav-linkも、ユニークなclass名なのに、
何故CSS2のように親要素のクラスから指定しないとダメなのでしょうか。
素人質問ですみませんが、どうぞよろしくお願いします。(_ _)
CSS1
1.nav-link.active, .nav-link:hover { 2 color: #1ebba3; 3} 4
CSS2
1.navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link:hover { 2 color: #1ebba3; 3} 4
HTML
1<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top"> 2 <a class="navbar-brand" href="#"><img src="img/nuno.png" alt=""></a> 3 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"> 4 <span class="navbar-toggler-icon"></span> 5 </button> 6 7 <div class="collapse navbar-collapse" id="navbarResponsive"> 8 <ul class="navbar-nav ml-auto"> 9 <li class="nav-item active"> 10 <a class="nav-link active" href="#HOME">HOME</a> 11 </li> 12 <li class="nav-item"> 13 <a class="nav-link" href="#COURSE">COURSE</a> 14 </li> 15 16 <li class="nav-item"> 17 <a class="nav-link" href="#CONTACT">CONTACT</a> 18 </li> 19 </ul> 20 </div> 21</nav>
!important をつけると既存CSSよりも優先されますので覚えておくとよいかもしれません
回答1件
あなたの回答
tips
プレビュー