navbarの各メニューの文字色を変えたい

Question

初歩的な質問で恐縮です。
bootstrap-sassです。

表題の通りです。

最初、以下のように「navbar-dark」を入れましたが変わらず。

     <nav>
        <ul class="nav navbar-nav navbar-right navbar-dark" >
            <li><a href="/categories">カテゴリから探す</a></li>
            <li><a href="#">お知らせ</a></li>
            <li><a href="/mypages">マイページ</a></li>
            
        </ul>
      </nav>

以下のようにcolorを指定しても変わらずでした。
ちなみに<li>にも試しましたが同じでした。

 <ul class="nav navbar-nav navbar-right"  style="color: #43acff;">

分かる方教えていただけないでしょうか？

Answer 1

aタグにcolorを指定する必要があると思います。

試しに、以下のように指定してみてください。

<li><a href="/categories" style="color: #43acff;">カテゴリから探す</a></li>

うまくいったら、CSS側でaタグにcolorを指定するようにしてください。

Comments

[pecchan]

有難う御座います！
aタグでいけました！

navで囲まれている場合は、ulやliには効かないわけですね！

[new1ro]

Bootstrap側で、子要素のaタグにcolorが指定されているため
祖先要素のulで指定したcolorよりも、aタグの指定が優先されている状態と思われます。

> navで囲まれている場合は、ulやliには効かないわけですね！
上記理解だとおそらく誤りです。
〇〇タグで囲われている場合、CSSの〇〇が効かないということはほぼないです。

CSSの「継承プロパティ」について調べてみたほうがよさそうです。
https://developer.mozilla.org/ja/docs/Web/CSS/inherit
https://developer.mozilla.org/ja/docs/Web/CSS/inheritance#Inherited_properties

[pecchan]

有難う御座います。
navで囲まれているからではなく、Bootstrap側の継承によるものだったのですね！勘違いするところでした^^;