nth-childで奇数列のテキスト入力欄の色を変更したい

Question

入力フォームの模写コーディングに悪戦苦闘しております。

「あなたのお名前」
「メールアドレス」
の二つだけ、テキスト入力欄の色を赤く、
それ以外を灰色に変えたいと思っています。

まずは赤くする所から、と思い

.form dl dd input:nth-child(odd){
background-color: red;}

と入力しましたが
インプット欄が全部赤くなりました、、、

これでは違っているのはわかるのですが、
思いつかず、
他には
.form input:nth-child(odd)
としてみたり
.form dl dd :nth-child(odd)
としてみたり
いろんなパターンで試してうまくいかず、
行き詰まってしまいました。

いつも初歩的な質問になり、恐縮なのですが、
ご回答よろしくお願いします。

<form class="content-wrapper">
    <article class="form">
      <dl>
        <dt>あなたのお名前</dt>
        <dd><input type="text"></dd>
      </dl>
      <dl>
        <dt>フリガナ</dt>
        <dd><input type="text"></dd>   
      </dl>
      <dl>
        <dt>メールアドレス</dt>
        <dd><input type="text"></dd>     
      </dl>
      <dl>
        <dt>電話番号</dt>
        <dd><input type="text"></dd>   
      </dl>
      <dl>
        <dt>お問い合わせ内容</dt>
        <dd><textarea></textarea></dd>
      </dl>
      <p>お客様の個人情報は慎重に取り扱い、ご意見なしに第三者に提供または開示する事はございません。</p>

    <setion class="form-button">
      <button class="button1" type="submit">個人情報保護方針についてはこちらをご覧ください</button>
      <button class="button2" type="submit">同意して確認画面へ</button>
    </setion>
    </form>

.form{
  margin: 0 auto;
  max-width: 800px;
}

.form dl {
  display: flex;
  justify-content: center;
  /* border-bottom: dotted 1px gray; */
  padding-bottom: 1rem;
  margin-bottom:1rem;
  position: relative;
}

.form dl:after {
  content:" ";
  border-bottom: dotted 1px #000;
  width:100%;
  position:absolute;
  bottom: 0;
}


.form dl dt{
  width: 25%;
  font-weight: bold;
}

.form dl dd{
  width: 75%;
}

.form dl dd input{
  width: 100%;
}

.form dl dd textarea{
  width: 100%;
  height: 100px;
}

.form dl dd input:nth-child(odd){
  background-color: red;
}

Comments

[kei344]

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

[AmanoEriko]

大変失礼しました。
ご指摘ありがとうございます！

Answer 1

:nth-childは「兄弟要素の何番目か」という意味しかないので、input:nth-childとしても、「兄弟要素の何番目」かつ「input要素」のものを指すことになります。

兄弟要素部分に指定してみてください。

.form dl:nth-child(odd) dd input{ background-color: red; } 

Comments

[AmanoEriko]

だから全部　赤くなっちゃってたんですね。
とても勉強になりました！
擬似要素を使っての指定はかなり頻繁に出てくる様なので、
沢山使って練習します！

Answer 2

:nth-childは親要素から見た番号を指定するものですので、上記のように書くとddの中にあるinputの中で奇数番目という意味になります。

.form dl:nth-child(odd) dd input{
  background-color: red;
}

Comments

[AmanoEriko]

ddの中のinputの奇数番目、　だとテキストボックス全部、ということになってしまいますものね。
教えてくださった通りに記述したら、解決しました！
とても勉強になりました！