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

95

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!

css class overriding

— user3075049
source

90

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.

— Jukka K. Korpela
source

Vous avez écrit Ce sont des exemples de noms de classes qui ne devraient pas être utilisés, car ils reflètent un rendu spécifique et non des rôles structurels ou sémantiques. Pourriez-vous élaborer, s'il vous plaît? Pourquoi devrait leftet background-noneêtre évité?

— Socrates

1

@Socrates: Certaines personnes pensent que les classes ne doivent css recevoir des noms qui identifient ce que l'élément auquel il est appliqué à est ou fait (par exemple button, name-labeletc.). D' autres estiment que CSS devient ingérable si vous utilisez cette approche et vous devez utiliser « utilitaire d'abord » ou « fonctionnelle » où les classes css correspondent à des valeurs de propriété (par exemple margin-top-4, width-10, etc.). Historiquement, l'approche «sémantique» a été dominante alors que récemment l'approche «fonctionnelle» a gagné des adhérents. Essayez les deux sur un projet de taille moyenne, puis décidez vous-même de ce qui est supérieur.

— Mattia

62

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

— Pranav C Balan
source

40

! important est une mauvaise pratique. Bientôt, tout le code devient! Important.

— TPAKTOPA

25

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é).

— Marc Audet
source

25

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.

— Usman
source

9

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.

— Ruud
source

Merci pour la réponse! J'ai essayé cela comme première solution, mais pour une raison quelconque, cela n'a pas fonctionné!

— user3075049

Cette façon de remplacer les classes css ne fonctionnera pas si les styles sont définis d'une manière spécifique comme .form-horizontal .form-group {margin-left: -15px}. Ici, vous devrez utiliser! Important

— DanKodi

ajouter! important à .background-none {arrière-plan: aucun! importatn; } cela fonctionne bien

— santhosh

1

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

— Ignace Andrew
source