Cómo anular las propiedades de una clase CSS usando otra clase CSS

Soy bastante nuevo en CSS3 y quiero poder hacer lo siguiente:

Cuando agrego una clase a un elemento, anula las propiedades de otra clase utilizada en este elemento específico.

Digamos que tengo

<a class="left carousel-control" href="#carousel" data-slide="prev">

Quiero poder agregar una clase llamada bakground-none, que anulará el fondo predeterminado en la clase left.

¡Gracias!

Hay diferentes formas en las que se pueden anular las propiedades. Asumiendo que tienes

.left { background: blue }

por ejemplo, cualquiera de los siguientes lo anularía:

a.background-none { background: none; }
body .background-none { background: none; }
.background-none { background: none !important; }

Los dos primeros "ganan" por la especificidad del selector; el tercero gana con !importantun instrumento contundente.

También puede organizar sus hojas de estilo para que, por ejemplo, la regla

.background-none { background: none; }

gana simplemente por orden, es decir, por ser después de una regla de otra manera igualmente “poderoso”. Pero esto impone restricciones y requiere que tenga cuidado al reorganizar las hojas de estilo.

Todos estos son ejemplos de CSS Cascade , un concepto crucial pero ampliamente incomprendido. Define las reglas exactas para resolver conflictos entre las reglas de la hoja de estilo.

PD Usé lefty background-nonecomo se usaron en la pregunta. Son ejemplos de nombres de clases que no deben usarse, ya que reflejan una representación específica y no roles estructurales o semánticos.

Solo utilícelo !importantayudará a anular

background:none !important;

Aunque se dice que es una mala práctica, !importantpuede ser útil para las clases de servicios públicos, solo necesita usarlo de manera responsable, verifique esto: Cuando Usar importante es la opción correcta

Como alternativa a la importantpalabra clave, puede hacer que el selector sea más específico, por ejemplo:

.left.background-none { background:none; }

(Nota: no hay espacio entre los nombres de las clases).

En este caso, la regla se aplicará cuando ambos .lefty .background-noneestén enumerados en el atributo de clase (independientemente del orden o la proximidad).

Debe anular aumentando la especificidad de su estilo. Hay diferentes formas de aumentar la especificidad. El uso de lo !importantque afecta la especificidad, es una mala práctica porque rompe la cascada natural en su hoja de estilo.

El siguiente diagrama tomado de css-tricks.com lo ayudará a producir la especificidad correcta para su elemento en función de una estructura de puntos. La especificidad que tenga puntos más altos, ganará. Suena como un juego, ¿no?

Consulte los cálculos de muestra aquí en css-tricks.com . Esto te ayudará a comprender muy bien el concepto y solo te llevará 2 minutos.

Si luego le gusta producir y / o comparar diferentes especificidades usted mismo, pruebe esta Calculadora de especificidad: https://specificity.keegan.st/ o simplemente puede usar papel / lápiz tradicional.

Para obtener más información, pruebe MDN Web Docs .

Todo lo mejor para no usar !important.

Si enumera la bakground-noneclase después de las otras clases, sus propiedades anularán las ya establecidas. No es necesario utilizarlo !importantaquí.

Por ejemplo:

.red { background-color: red; }
.background-none { background: none; }

y

<a class="red background-none" href="#carousel">...</a>

El enlace no tendrá fondo rojo. Tenga en cuenta que esto solo anula las propiedades que tienen un selector que es menos o igualmente específico.

LIFO es la forma en que el navegador analiza las propiedades de CSS. Si está utilizando Sass, declare una variable llamada como

"$ fondo-encabezado: rojo;"

utilícelo en lugar de asignar directamente valores como rojo o azul. Cuando desee anular, simplemente reasigne el valor a

"$ fondo-encabezado: azul"

luego

color de fondo: $ fondo de encabezado;

debería anular sin problemas. Usar "! Important" no siempre es la elección correcta. Es solo una revisión