CSSのクラス内において、任意のタグに一括で装飾を行う方法はありますでしょうか？

Question

#質問したいこと
HTMLのh1タグを装飾したい場合、例えば、

h1{
    color:blue;
}

以上のような書き方でh1タグ内の言葉を装飾できるかと思います。
では、クラス内の特定のタグのみ装飾したい場合はどのようにすればいいのでしょうか？

#具体例

 <div class="log-form">
　　<form>
　　　　<input type="text" title="username" placeholder="username" />
　　　　<input type="password" title="password" placeholder="password" />
　　　　<button type="submit" class="btn">Login</button>
  </form>
</div>

例えば以上のようなコードで、log-formクラスのinputのみをCSSにより一括で装飾したいのですが、いまいち方法が分かりません。色々試しましたが、全く出来そうになかったです。
inputのみに適用する別のクラスを立てるべきなのでしょうか？
どのような方法が一般的か、ご教示ください。よろしくお願いします。

#環境
macOS Catalina 10.15.5
Google Chromeバージョン: 83.0.4103.116
Apacheを使いローカル環境で確認しています

#追記
.log-form input{}により選択できるとの指摘を多く受けたので、こちらの場合の不具合の詳細について追記いたします。

.log-form input{
　　background-color: red;
}

このようにCSSで記入した場合、パスワードの欄だけが赤塗りになります。

HTMLには問題がないと思うのですが。。

 <div class="log-form">
  <form>
      <ul>
        <li class="log-form-username">
            <label for="name">ユーザーID</label>
            <input type="text" title="username" placeholder="username" />
        </li><br>
        <li class="log-form-password">
            <label for="name">パスワード</label>
            <input type="password" title="password" placeholder="password" />
        </li><br>
        <li class="log-form-button">
             <button type="submit" class="btn">Login</button>
        </li><br>
  </form>

ゴールとしては、usernameとpasswordそれぞれの入力フォームを同じ形にした上で、CSSで触れるようにしたいです。
見落としてる箇所わかる方いましたら、ご助言お願い致します。

Comments

[m.ts10806]

「色々試した」方法を一通りだして、それについて「なぜできなかったか」をアドバイス得た方が本質的な理解に繋がるのでは

[soi]

ご回答ありがとうございます。回答の皆さんから指摘を受けた.log-form inputセレクタにCSSを当てたときの不具合について追記いたしました。仰る通りこちらの方が本質的にわかってなかった点のようです

[gogoweb_ikeda]

background-colorの色指定の個所を
red !important;
に変更してみてください。
それで色が変わるようでしたら他のセレクタで上書きされています。

[soi]

ありがとうございます！　確かに色が変わりました、他のスタイルが適用されてしまっていたようです。
他のCSSを確認してみます！

[Daregada]

HTMLの内容をできるだけ隠そうとするから、回答が求めているものではなくなるのです。
今回の件で言えば、head要素内でCSSを複数読み込んでいる部分が質問文に含まれていれば、「別のCSSファイルの設定が影響しているのでは」という回答が早めに出てきたでしょう。

Answer 1

.log-form inputセレクタで当該のものを選択できます。

ただし、inputはtypeによって全く挙動が変わってしまうという特徴がありますので、inputにまとめてスタイルを適用するのには要注意です。

Comments

[soi]

ご回答ありがとうございます。恐らくご指摘のtypeによる挙動の違いだと思います、そちらについて調べて見ます。

[maisumakun]

ユーザー名の方に別なスタイルが適用されていたりはしませんでしょうか？（他に何かしらのスタイルを適用しているなら、それを提示していただければと思います）

[soi]

仰る通り、他の既存のスタイルによってユーザー名のように別のスタイルが適用されていたようです！　一度他のスタイルを全て消してみたらユーザー名の方にも赤塗りが当たりました。
他のCSSは量があるので、何が当たっているか探すのはこちらでやろうと思います。大変助かりました、ありがとうございます！

Answer 2

普通に子孫セレクターを使って、

.log-form input {
  background-color: wheat;
}

みたいにすればできるんだけど、やってみましたか?

Comments

[soi]

ご回答ありがとうございます。
そちらはやってみましたが、追記の通り挙動がおかしく今回該当しないものなのかなと考えていました。他で見落としがあるようなので、調べております。

Answer 3

.log-form input {
  /* かけたいスタイル */
}

のように 親要素 と 子要素(指定タグ) をスペースでつなげば
親要素内の指定タグに一括してスタイルを当てられます^^

Comments

[-millmill-]

セレクタを使えば、もっと細かい指定も可能です。
css セレクタ
でググってみて下さい^^

[soi]

ご回答ありがとうございます。
細かい指定が必要になりそうなので、調べて頭に入れてみます。