css Formatierung von jquery ui Autocomplete

Question

Ich habe ein Web-basiertes Dienstprogramm für Schach Turnier manuelle Paarungen. Ich muss jQuery ui Autocomplete formatieren, damit die weißen Spieler Menüpunkte linksbündig auswählen und die schwarzen Spieler Menüpunkte rechtsbündig auswählen. Hier ist der Link: http://communitychessclub.com/test.php

Ich habe viele verwirrende und wahrscheinlich widersprüchliche CSS-Styling-Methoden gesehen. Zum Beispiel:

ul.ui-autocomplete.ui-menu {background:pink; font-size:1.5rem; text-align:center; letter-spacing:2px;} 

.ui-widget-content.ui-menu .ui-menu-item {color: red; font-weight: bold;} 
.ui-widget-content.ui-menu .ui-menu-item {color: tan; font-weight: bold;} 

die HTML:

<div class = "ui-widget white"><input type = "text" class = "automplete-2"></div> 
<div class = "ui-widget black"><input type = "text" class = "automplete-2"></div><br /> 

Wie kann ich den weißen Spielers zur automatischen Vervollständigung Inserat linksbündig und die schwarzen Spieler der automatischen Vervollständigung Auflistung rechtsbündig haben. Versuchen

Answer 1

die gerade/ungerade Argument von nth-of-type CSS-Selektor:

.ui-menu:nth-of-type(even) li div{ /* black */ 
    text-align: left !important; 
} 
.ui-menu:nth-of-type(odd) li div{ /* white */ 
    text-align: right !important; 
}