Como substituir as propriedades de uma classe CSS usando outra classe CSS

Eu sou bastante novo em CSS3 e quero ser capaz de fazer o seguinte:

Quando adiciono uma classe a um elemento, ele substitui as propriedades de outra classe usada neste elemento específico.

Digamos que eu tenho

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

Eu quero ser capaz de adicionar uma classe chamada bakground-none, que substituirá o plano de fundo padrão da classe left.

Obrigado!

Existem diferentes maneiras de substituir as propriedades. Supondo que você tenha

.left { background: blue }

por exemplo, qualquer um dos seguintes o substituiria:

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

Os dois primeiros “ganham” por especificidade do seletor; o terceiro vence por !important, um instrumento contundente.

Você também pode organizar suas folhas de estilo para que, por exemplo, a regra

.background-none { background: none; }

ganha simplesmente por ordem, ou seja, por estar atrás de uma regra igualmente “poderosa”. Mas isso impõe restrições e exige que você seja cuidadoso em qualquer reorganização de folhas de estilo.

Todos esses são exemplos do CSS Cascade , um conceito crucial, mas amplamente mal compreendido. Ele define as regras exatas para resolver conflitos entre as regras da folha de estilo.

PS Eu usei lefte background-nonecomo eles foram usados ​​na pergunta. Eles são exemplos de nomes de classes que não devem ser usados, pois refletem renderizações específicas e não funções estruturais ou semânticas.

Basta usá- !importantlo ajudará a substituir

background:none !important;

Embora seja considerada uma prática ruim, !importantpode ser útil para classes de utilitários, você só precisa usá-lo com responsabilidade, verifique isto: Ao usar o importante é a escolha certa

Como alternativa à importantpalavra - chave, você pode tornar o seletor mais específico, por exemplo:

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

(Nota: nenhum espaço entre os nomes das classes).

Nesse caso, a regra será aplicada quando ambos .lefte .background-noneestiverem listados no atributo de classe (independentemente da ordem ou proximidade).

Você deve substituir aumentando a especificidade de seu estilo. Existem diferentes maneiras de aumentar a Especificidade. O uso de !importantespecificidade de efeitos é uma prática ruim porque quebra a cascata natural em sua folha de estilo.

O diagrama a seguir retirado de css-tricks.com o ajudará a produzir a especificidade certa para o seu elemento com base em uma estrutura de pontos. Qualquer especificidade que tiver pontos mais altos, vencerá. Parece um jogo - não é?

Confira exemplos de cálculos aqui em css-tricks.com . Isso ajudará você a entender o conceito muito bem e levará apenas 2 minutos.

Se você gosta de produzir e / ou comparar diferentes especificidades por si mesmo, tente esta Calculadora de Especificidade: https://specificity.keegan.st/ ou você pode usar apenas papel / lápis tradicional.

Para ler mais, experimente o MDN Web Docs .

Tudo de bom por não usar !important.

Se você listar a bakground-noneclasse após as outras classes, suas propriedades substituirão as já definidas. Não há necessidade de usar !importantaqui.

Por exemplo:

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

e

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

O link não terá um fundo vermelho. Observe que isso só substitui as propriedades que têm um seletor que é menos ou igualmente específico.

LIFO é a forma como o navegador analisa as propriedades CSS. Se você estiver usando Sass, declare uma variável chamada como

"$ header-background: red;"

use-o em vez de atribuir valores diretamente como vermelho ou azul. Quando você quiser substituir, basta reatribuir o valor para

"$ header-background: blue"

então

cor de fundo: $ header-background;

ele deve substituir suavemente. Usar "! Important" nem sempre é a escolha certa ... É apenas um hotfix