質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

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

AmanoEriko
AmanoEriko

総合スコア12

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

2回答

0グッド

0クリップ

1338閲覧

投稿2020/05/03 07:26

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

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

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

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

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

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

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

html

1<form class="content-wrapper"> 2 <article class="form"> 3 <dl> 4 <dt>あなたのお名前</dt> 5 <dd><input type="text"></dd> 6 </dl> 7 <dl> 8 <dt>フリガナ</dt> 9 <dd><input type="text"></dd> 10 </dl> 11 <dl> 12 <dt>メールアドレス</dt> 13 <dd><input type="text"></dd> 14 </dl> 15 <dl> 16 <dt>電話番号</dt> 17 <dd><input type="text"></dd> 18 </dl> 19 <dl> 20 <dt>お問い合わせ内容</dt> 21 <dd><textarea></textarea></dd> 22 </dl> 23 <p>お客様の個人情報は慎重に取り扱い、ご意見なしに第三者に提供または開示する事はございません。</p> 24 25 <setion class="form-button"> 26 <button class="button1" type="submit">個人情報保護方針についてはこちらをご覧ください</button> 27 <button class="button2" type="submit">同意して確認画面へ</button> 28 </setion> 29 </form>

CSS

1 2.form{ 3 margin: 0 auto; 4 max-width: 800px; 5} 6 7.form dl { 8 display: flex; 9 justify-content: center; 10 /* border-bottom: dotted 1px gray; */ 11 padding-bottom: 1rem; 12 margin-bottom:1rem; 13 position: relative; 14} 15 16.form dl:after { 17 content:" "; 18 border-bottom: dotted 1px #000; 19 width:100%; 20 position:absolute; 21 bottom: 0; 22} 23 24 25.form dl dt{ 26 width: 25%; 27 font-weight: bold; 28} 29 30.form dl dd{ 31 width: 75%; 32} 33 34.form dl dd input{ 35 width: 100%; 36} 37 38.form dl dd textarea{ 39 width: 100%; 40 height: 100px; 41} 42 43.form dl dd input:nth-child(odd){ 44 background-color: red; 45}

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

kei344

2020/05/03 17:04

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

2020/05/03 19:45

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

回答2

2

ベストアンサー

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

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

CSS

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

投稿2020/05/03 07:33

kei344

総合スコア69020

soliste16, AmanoEriko👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

AmanoEriko

2020/05/03 11:07

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

2

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

css

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

投稿2020/05/03 07:30

soliste16

総合スコア757

AmanoEriko, kei344👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

AmanoEriko

2020/05/03 11:08

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

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。