独自のIDを持つクラスのスタイルを変更する

Question

私は自分のウェブサイトのdivクラスにたくさんのフォームコントロールを持っており、フォームコントロールを1つだけ変更したいと思っています。どのように可能ですか？私はIDを与えることを試みたが、それは働かなかった。

<ul className="nav navbar-nav navbar"> 
       <li><input type="search" className="form-control" id="this" placeholder="Search" id="search_input" /></li> 
       <div className="col-sm-1"> 
       <li><button type = 'button' onClick={submitSearch}>Search</button></li> 
       <li> 
        <div id="search_results"> 
        </div> 
       </li> 
       </div> 
</ul> 

このフォームコントロールのスタイルを変更したいだけです。どのように私のCSSファイルに書き込む必要がありますか？あなたより。あなたはpesudo要素を使用することができますいくつかのセレクタをフィルタリングする場合

Answer 1

を

<input type="search" className="form-control" id="this" placeholder="Search" id="search_input" />

なぜあなたをすることができることを問題があります。 IDの1つを削除してから、もう1つをcssでターゲットにします。

<input type="search" className="form-control" placeholder="Search" id="search_input" />

input#search_input { /* css style here */ } 

Answer 2

：..あなたは、同じ入力に2つのIDを持っている

.form-control:first-of-type //First in its parent 
.form-control:last-of-type //last in its parent 
.form-control:nth-child(2) //.form-control only where it is second element of its parent