classi, form e select

[linoma]

Salve,

ho questo problema ho un div con class='X' dove tra le altre cose ce definito il background per i vari elementi del tipo <input> <select> etc etc.
Quindi creato il form attribuisco ad un <select> un classe Y che redefinisce il background, ma viene considerato dopo la classe X, quindi rimane inalterato il background

.X select{
background:...
}

.Y{
background...
}

<div class='X'>
 <form>
  <select class='Y'>
  </select>
 </form>
</div>

Soluzioni?

Grazie per le risposte.

[Sky]

Potresti usare la clausola !important ma io ti suggerisco di lavorare sulla specificità dei selettori.

".x select" è più specifico di ".y" perché, nel primo caso, usi due selettori per individuare l'elemento (la classe + il nome del tag). Pertanto il browser adotterà gli stili associati ad esso anche se il selettore ".y" viene definito dopo ".x select".
E' l'essenza dei CSS

Usa lo stesso numero di selettori e allora il browser interpreterà gli stili definiti per ultimi:

.X select{
background:...
}

.Y select{
background...
}

Puoi approfondire l'argomento in questa pagina, ai paragrafi "peso" e "specificità".
Ciao!