css親クラスに基づく動的クラス

Question

私は、Twitterのtypeahead.jsを使用して、ユーザーが情報を入力するときに2つの異なる入力ボックスをページに自動入力します。

ライブラリーの仕組みは、tt-menuというクラスを持つ入力ボックスの下に<div>エレメントを追加することです。

私の最初の入力ボックスが850pxの幅を持っているので、次のように私は私のCSSでクラスを追加、「オート」のtypeahead.jsのデフォルトの幅を上書きしている：

.tt-menu { 
width: 850px; 
} 

これは、上の先行入力ドロップダウンを強制的に入力ボックスは入力ボックス自体と同じでなければならず、正常に動作します。

私の問題は、2番目の入力ボックスが650pxしかないことです。そのため、タイプアヘッドのドロップダウンは入力ボックスの200pxより大きくなります。

.inputBoxA tt-menu { 
    width: 850px; 
} 

.inputBoxB tt-menu { 
    width: 650px; 
} 

しかし、この：私はそれが何かのように、下の入力ボックスに依存tt-menuクラスを変更するための方法があるかどう

私の入力のそれぞれが独自のクラスを持っていたよう

は、私は思ったんだけど解決策は機能しません。

受け入れ答えは私のために働いていたものを、このスレッド

.inputBoxA > tt-menu 

時にたまたま誰かのために動作しない場合には編集

最終的だった

.inputBoxA .tt-menu 

Answer 1

異なるCSSを使用してみてくださいメニューのの子であることをよりよく定義するためのセレクタ。

は、あなたの線に沿って、あなたのCSSセレクタで何かを>を使用して行うことができます。

.inputBoxA > tt-menu { width:850px; } 

これは.inputBoxA親の下にあるすべてのTT-メニューを選択します。

この特定の例が機能しない場合、またはこの概念について詳しくは、hereをご覧ください。