css dynamische Klasse basierend auf Elternklasse

Question

Ich benutze Twitter typeahead.js, um zwei verschiedene Eingabefelder auf meiner Seite automatisch zu füllen, während der Benutzer Informationen in sie eingibt.

Die Funktionsweise der Bibliothek besteht darin, dass unter dem Eingabefeld ein <div> Element mit der Klasse tt-menu hinzugefügt wird.

Meine erste Eingabefeld hat eine Breite von 850px, so habe ich eine Klasse in meinem CSS wie folgt, die typeahead.js die Standardbreite von „auto“ überschreibt:

.tt-menu { 
width: 850px; 
} 

Dies zwingt die typeahead Dropdown auf das Eingabefeld ist dasselbe wie das Eingabefeld selbst, und es funktioniert gut.

Mein Problem ist, dass meine zweite Eingabebox nur 650px ist - also ist die Dropdown-Liste 200mal größer als das Eingabefeld.

Wie jedes meiner Eingänge seine eigene Klasse hat, frage ich mich, ob es einen Weg für mich ist auf das Eingabefeld in Abhängigkeit der tt-menu Klasse zu ändern, dass es unter ist, so etwas wie:

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

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

Aber diese Lösung funktioniert nicht.

bearbeiten

Im Falle der akzeptierte Antwort für jemanden nicht funktioniert, die für mich auf diesen Thread geschieht

.inputBoxA > tt-menu 

was letztlich

war arbeitete

.inputBoxA .tt-menu 

Answer 1

Versuchen Sie ein anderes CSS Selektor, um besser zu definieren, dass es ein Kind des Menüs ist.

Sie können mit > in Ihrem CSS-Selektor, etwas entlang der Linien von so tun:

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

Dies wählt all tt-Menü unter den .inputBoxA Eltern.

Wenn dieses spezifische Beispiel nicht funktioniert oder Sie mehr über dieses Konzept lesen möchten, sehen Sie here.