Bootstrapで定義されたCSSクラスを、意図したHTML要素に効率的に適用したい

Question

##質問
nav要素配下の子孫要素全てにBootstrapのtext-lightクラスを適用したいですのですが、nav要素にtext-lightを指定しても子孫要素のaタグなどには適用されません。子孫要素全てに適用しようとする場合、各子孫要素へ個別にtext-lightクラスを指定する非効率な方法しか思い浮かびませんでした。

一度の記述でnav全体のテキストに適用できるような、効率的なCSS指定方法はございませんでしょうか？

どうぞよろしくお願い申し上げます。

<!-- 一度の記述でtext-lightクラスをnav要素全体に適用したいです。 -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark text-light "> 
    <a class="navbar-brand text-light" href="#">サイト名</a>

    <div class="collapse navbar-collapse" id="Navbar">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a href="#" class="nav-link">マイページ</a>   
            </li>
   
            <li class="nav-item">
                <a class="nav-link" href="#">管理画面</a>
            </li>
            
        </ul>
    </div>
</nav>

##現状の妥協策：非効率なtext-light指定方法（各要素にその都度指定する非効率な記述方法）

<!-- 一度の記述でtext-lightクラスをnav要素全体に適用したいです。 -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark text-light "> 
    <a class="navbar-brand text-light" href="#">サイト名</a>

    <div class="collapse navbar-collapse" id="Navbar">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a href="#" class="nav-link text-light">マイページ</a>   
            </li>
   
            <li class="nav-item">
                <a class="nav-link text-light" href="#">管理画面</a>
            </li>
            
        </ul>
    </div>
</nav>

Comments

[phper.k]

text-right じゃなくて text-light ？

[m.ts10806]

どういう効果を期待してますか？
文字色ですか？配置ですか？
https://getbootstrap.com/docs/4.0/utilities/colors/#color
https://getbootstrap.com/docs/4.0/utilities/text/#text-alignment

[Lhankor_Mhy]

>phper.kさん

text-light はありますよ？
https://getbootstrap.jp/docs/4.3/utilities/colors/

[Lhankor_Mhy]

.nav-link に color プロパティのルールがあるので、承継ルールは!importantをしてても上書きされます。

なので、オリジナルのテーマでも作るしかないんじゃないかと思います。
https://bootstrap.build/

[fukazume]

皆様、コメントありがとうございます！Lhankor_Mhyさん、ご解説ありがとうございます！Bootstrapでも限界はあるのですね。オリジナルテーマ作成は私のレベルでは敷居が高くも見えてしまいますが参考にさせていただきます！

[Lhankor_Mhy]

または、普通にCSSで
.nav-item{ color:white !important; }でもいいかと思います。

[fukazume]

Bootstrapでも適用が一筋縄にはいかないんですね。継続的にアドバイスをくださり、誠にありがとうございます！

Answer 1

コメントいただきました皆様、理解をしようとしてくださり、どうもありがとうございました。

Lhankor_Mhyさんよりいただいたご回答を今回のベストアンサーとさせていただきたいです。

または、普通にCSSで
.nav-item{ color:white !important; }でもいいかと思います。

また.nav-linkなどに指定してもいいかもしれないと思いました。