2

Tengo este estilo

.ui-1{
border:0;
....
background-color:red;
}

y tengo este otro estilo:

.bazul{
background-color:blue
}

lo uso asi:

<button class="ui-1">Hola</button>

pero si quiero aplicarle fondo azul con .bazul no me agarra solo me detecta el fondo rojo del estilo original (ui-1)

<button class="ui-1 bazul">Hola</button>

La pregunta es: que codigo css me permite reemplazar un estilo segun un nuevo selector (.bazul)

5
  • Si tienes las dos clases, hará caso a la primera. Si quieres que cambie de color, quitale la class ui-1, o, hazlo vía javascript al hacer un click, pero si hay dos clases, y las dos tienen una instrucción igual, pero el valor es diferente, irá de arriba a abajo.
    – AQMR
    Commented el 10 mar. 2021 a las 7:49
  • no pues, la idea es no quitarle el class ui-1 si no no tendria sentido, se que puedo usar .ui-1.bazul{background-color:blue;} y esto funcionaria pero tendria que hacerlo con todos mis ui-....
    – IntruzO
    Commented el 10 mar. 2021 a las 7:55
  • Entonces la cuestión es que quieres cambiarle el background y ya, no? De ser así, ¿por qué no pruebas a hacer un .addEventListener('click') y le haces cambiar de color dinámicamente con cada clic del botón?? Como idea vaya
    – AQMR
    Commented el 10 mar. 2021 a las 7:57
  • Algo así: document.querySelector(".ui-1").addEventListener("click", ()=>{button.style.backgroundColor:blue})
    – AQMR
    Commented el 10 mar. 2021 a las 7:59
  • no amigo no me entiendes, y quisas es mi culpa por no plantear bien el problema. lo que deseo es por ejemplo normalmente usar .ui-1 para mis botones, pero en algun momento quiero usarlo con fondo azul entonces adicionarle al .ui-1 un .bazul pero no de manera dinamica si no estatica
    – IntruzO
    Commented el 10 mar. 2021 a las 19:09

3 respuestas 3

4

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

4
  • A qué te refieres con que el código será inconsistente. No lo uso casi nunca, pero alguna vez me vi forzado a hacerlo. ¿Qué tiene de malo concretamente, en qué le afecta?
    – AQMR
    Commented el 10 mar. 2021 a las 10:02
  • 1
    Afecta en que las reglas de especifidad y cascada están hechas para que usándolas llegues a tener una mejor estructura de tu CSS. Si pasas por el atajo del !important estás ocasionando una ruptura en esa estructura. Si abusas de ello acabarás teniendo que un mismo elemento obtiene la misma regla CSS con !important desde dos clases diferentes y entonces ya te encontrarás jugando con dos jerarquias paralelas: la de tu clases que no tienen !important y las que si lo tienen, cada una de ellas con su especifidad propia.
    – phpMyGuel
    Commented el 10 mar. 2021 a las 10:05
  • 1
    developer.mozilla.org/es/docs/Web/CSS/…
    – phpMyGuel
    Commented el 10 mar. 2021 a las 10:09
  • Tomo nota, muchísimas gracias!
    – AQMR
    Commented el 10 mar. 2021 a las 10:11
1

Única y exclusivamente con CSS creo que no se puede hacer. Deberías tener que apoyarte en algún lenguaje como js (en el front-end), PHP, ASP, ...(en el back-end). Quiero decir, si quieres hacer que el color de fondo sea condicional o variable (es decir, que esté sujeto a alguna condición), deberás apoyarte en algún otro lenguaje que discrimine esa condición.

Personalmente creo que sería mejor que utilizases un atributo id en tu elemento para conseguir lo que quieres, aunque esto depende de sus necesidades o requerimientos.

Te he puesto dos ejemplos (con y sin id) y me he apoyado en un segundo elemento (un button adicional para crear ese evento o disparo que produzca el cambio de color). Tendrás que tener en cuenta que si decides hacerlo a través de la clase, todos los demás elementos que utilicen dicha clase también adquirirán ese cambio de color (a no se que hagas un filtrado previo, como he hecho en el primero de los ejemplos).

document.getElementById('change-color-1').addEventListener('click',function(){
  var element = document.getElementsByClassName('ui-1')[0];
  element.classList.add('bazul');
});


document.getElementById('change-color-2').addEventListener('click',function(){
  var element = document.getElementById('button');
  element.classList.add('bazul');

});
.ui-1{
border:0;
background-color:red;
}

.bazul{
background-color:blue !important;
}
<button class="ui-1">Hola</button>
<button id="change-color-1">Hola</button>

<hr>

<button id="button" class="ui-1">Hola</button>
<button id="change-color-2">Hola</button>

1

Pon al que quieras que predomine la etiqueta !important

.bazul{
    background-color:blue !important;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.