Una de las peculiaridades del CSS es que actúa en cascada. ¿Qué quiere decir esto? Que el orden de aparición de las reglas importa. No es lo mismo esto:
.rojo {
color: red;
}
.azul {
color: blue;
}
Que esto:
.azul {
color: blue;
}
.rojo {
color: red;
}
Si tienes un elemento en el que tienes las clases .rojo
y .azul
al recorrer el CSS para aplicarle los estilos correspondientes a su clase, se va a hacer en orden de arriba a abajo. Eso quiere decir que si ambas clases están afectando a la misma regla (en nuestro caso al color
) se va a quedar sobre el elemento la última regla que lo modifique, ya que la posterior va sobreescribiendo a la anterior.
Si nos vamos a tu caso, dices que el color blue
de .bazul
no está consiguiendo sobreescribir al red
. Esto te está sucediendo por lo la cascada. Si quieres hacer que se quede el azul una manera de hacerlo sería poner la clase .bazul
por debajo de .ui-1
.
.ui-1{
border:0;
background-color:red;
color: #fff;
}
.bazul{
background-color:blue;
}
<button class="ui-1 bazul">Hola</button>
Otra manera de hacerlo sería aprovechándonos de la especifidad del CSS. La especifidad nos permite dar prioridad a ciertas reglas frente a otras. No voy a entrar ahora en todo lo que afecta a la especifidad, te remitiré un enlace al final de la respuesta, pero podemos hacer que la regla que queremos que pese más que la otra sea más específica diciéndole, por ejemplo, que se aplique a los botones que tengan además la clase.
button.bazul{
background-color:blue;
}
.ui-1{
border:0;
background-color:red;
color: #fff;
}
<button class="ui-1 bazul">Hola</button>
De esta manera, aunque por cascada se debería aplicar el color rojo (la clase que le da el color rojo está después de la que le da el color azul) hemos conseguido "truncarla" para aplicar la que necesitamos a través de la especifidad.
Por último, podrías valerte de !important
para dar prioridad a una regla específica, haciendo caso omiso tanto de la cascada como de la especifidad. Su uso está desaconsejado salvo en contadas excepciones, pero tu caso parece una de esas expceciones. Si creo una clase llamada .bazul
lo que me gustaría es que a todos los elementos a los que se la ponga se les ponga el fondo azul, independiente del color que esté recibiendo por otro lado o por herencia.
.bazul{
background-color:blue !important;
}
.ui-1{
border:0;
background-color:red;
color: #fff;
}
<button class="ui-1 bazul">Hola</button>
Quizá este último caso sea el que más te pueda ayudar. Aunque siempre ten en cuenta que abusar de !important
va a provocar que tu CSS sea inconsistente y que por ello, antes de usarlo debes agotar las otras dos vías.
Referencia: Cascada y herencia