Comment remplacer les propriétés d'une classe CSS à l'aide d'une autre classe CSS

Je suis assez nouveau dans CSS3 et je veux pouvoir faire ce qui suit:

Lorsque j'ajoute une classe dans un élément, cela remplace les propriétés d'une autre classe utilisée dans cet élément spécifique.

Disons que j'ai

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

Je veux pouvoir ajouter une classe appelée bakground-none, qui remplacera l'arrière-plan par défaut dans la classe left.

Merci!

Les propriétés peuvent être remplacées de différentes manières. En supposant que vous avez

.left { background: blue }

par exemple, l'un des éléments suivants le remplacerait:

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

Les deux premiers «gagnent» par spécificité du sélecteur; le troisième l'emporte !important, un instrument contondant.

Vous pouvez également organiser vos feuilles de style pour que, par exemple, la règle

.background-none { background: none; }

gagne simplement par ordre, soit en étant après une autre règle aussi « puissante ». Mais cela impose des restrictions et vous oblige à être prudent dans toute réorganisation des feuilles de style.

Ce sont tous des exemples de CSS Cascade , un concept crucial mais largement mal compris. Il définit les règles exactes de résolution des conflits entre les règles de feuille de style.

PS J'ai utilisé leftet background-nonecomme ils ont été utilisés dans la question. Ce sont des exemples de noms de classes à ne pas utiliser, car ils reflètent un rendu spécifique et non des rôles structurels ou sémantiques.

Il suffit de l'utiliser !importantpour remplacer

background:none !important;

Bien que cela soit considéré comme une mauvaise pratique, cela !importantpeut être utile pour les classes d'utilitaires, il vous suffit de l'utiliser de manière responsable, vérifiez ceci: Lors de l'utilisation d'important est le bon choix

Comme alternative au importantmot - clé, vous pouvez rendre le sélecteur plus spécifique, par exemple:

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

(Remarque: pas d'espace entre les noms de classe).

Dans ce cas, la règle s'appliquera lorsque les deux .leftet .background-nonesont répertoriés dans l'attribut de classe (indépendamment de l'ordre ou de la proximité).

Vous devez remplacer en augmentant la spécificité de votre style. Il existe différentes manières d'augmenter la spécificité. L'utilisation de la !importantspécificité des effets est une mauvaise pratique car elle rompt la cascade naturelle dans votre feuille de style.

Le diagramme suivant tiré de css-tricks.com vous aidera à produire la bonne spécificité pour votre élément en fonction d'une structure de points. Quelle que soit la spécificité qui a le plus de points, elle l'emportera. Cela ressemble à un jeu - n'est-ce pas?

Consultez des exemples de calculs ici sur css-tricks.com . Cela vous aidera à très bien comprendre le concept et cela ne prendra que 2 minutes.

Si vous souhaitez ensuite produire et / ou comparer différentes spécificités par vous-même, essayez ce calculateur de spécificité: https://specificity.keegan.st/ ou vous pouvez simplement utiliser du papier / crayon traditionnel.

Pour en savoir plus, essayez MDN Web Docs .

Tout le meilleur pour ne pas utiliser !important.

Si vous répertoriez la bakground-noneclasse après les autres classes, ses propriétés remplaceront celles déjà définies. Il n'est pas nécessaire d'utiliser !importantici.

Par exemple:

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

et

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

Le lien n'aura pas de fond rouge. Veuillez noter que cela remplace uniquement les propriétés qui ont un sélecteur qui est moins ou également spécifique.

LIFO est la façon dont le navigateur analyse les propriétés CSS. Si vous utilisez Sass, déclarez une variable appelée

"$ header-background: rouge;"

utilisez-le au lieu d'attribuer directement des valeurs comme le rouge ou le bleu. Lorsque vous souhaitez remplacer, réaffectez simplement la valeur à

"$ header-background: bleu"

puis

background-color: $ header-background;

il devrait passer en douceur. L'utilisation de "! Important" n'est pas toujours le bon choix. C'est juste un correctif