CSS記載時にうまく反映しない

Question

前提・実現したいこと

CSS記載の時に以下のことができず困っています。Googleで調べてもうまくヒットせず、どなたかご教示いただけますでしょうか。

①複数のセレクタを一度に指定できない
└セレクタを「,」で区切って同じCSSを反映しようとしてもCSSが反応しません

②子要素だけを指定できない
└.子要素{
color:red;
｝
のように子要素だけをCSSで指定しても反応せず
.親要素 .子要素{
color:red;
}
と親要素を前に付け加えると反応するようになります。まとめてクラスを指定できないため困っています。

該当のソースコード

①のCSS
html,
body {
    height: 100%;
    width: 100%;
    font-family: 'poppins', sans-serif;
    color: #222;
}
②のHTML
<div class="container-fluid padding">
        <div class="row welcome text-center">
            <div class="col-12">
                <h1 class="display-4">Built with ease</h1>
            </div>
            <hr>
            <div class="col-12">
                <p class="lead">welcom to my Bootstrap welcom to my Bootstrap welcom to my Bootstrap welcom to my Bootstrap welcom to my Bootstrap </p>
            </div>
        </div>
</div>

この時に[welcome]を指定してCSSを書きたい
②のCSS
※反映されない
.welcome {
    width: 75%;
    margin: 0 auto;
    padding-top: 2rem;
}
※反映される
.container-fluid .welcome {
    width: 75%;
    margin: 0 auto;
    padding-top: 2rem;
}

試したこと

親要素から記載すると反映されるのですが、子要素にいれたクラスでまとめてCSSを書きたいときに
いちいち親要素も書かないといけないため不便です。

補足情報（FW/ツールのバージョンなど）

・使用しているエディター：VSコード
・使用しているブラウザ：Googlechrome

Comments

[kei344]

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

Answer 1

クラス名から考えるとBootstrapを使っていませんか？
ほかに指定がある場合は詳細度の高いほうが反映されます。
デベロッパーツールを使って確認してみてください。

【詳細度 - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/Specificity

【初心者向け！Chromeの検証機能（デベロッパーツール）の使い方】
https://saruwakakun.com/html-css/basic/chrome-dev-tool

【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/

Comments

[ta93ttt]

Bootstrap使用してました。セレクタを増やして詳細度をあげないと反映してくれないということですね。ありがとうございました！

Answer 2

HTMLのクラスとしてcontainer-fluidやrowなどが設定されていますが、Bootstrap4など、何か他のCSSを入れていませんか？

CSSは詳細度でかかり方が決まりますので、他のCSSを上書きするには「セレクタを増やすなどで詳細度を上げる」もしくは「同じ詳細度で、後から書く」などの必要があります。

Comments

[ta93ttt]

ありがとうございます。おっしゃる通りBootstrapを使用しておりました。子要素だけではほかのCSSに対して詳細度が低すぎたから、親要素のセレクタも書かないと反映されなかったのですね。ありがとうございます！