Comment puis-je appliquer des styles à plusieurs classes à la fois ?

Question

Je veux que deux classes portant des noms différents aient la même propriété en CSS. Je ne veux pas répéter le code.

.abc {
   margin-left:20px;
}  
.xyz {
   margin-left:20px;
}

<a class="abc">Lorem</a>
<a class="xyz">Ipsum</a>

Puisque les deux classes font la même chose, je devrais pouvoir les fusionner en une seule. Comment puis-je le faire ?

Answer 1

Et si vous avez déjà défini ces classes avec leurs parents, vous devez les définir à nouveau avec les parents (répétez chaque fois) comme ci-dessous :

parent .abc, parent .xyz

Answer 2

Utilisation des pseudo-classes CSS :est (précédemment :any y :matches ) et où vous pouvez utiliser la virgule pour faire correspondre plusieurs classes à n'importe quel niveau.

Au niveau de la racine, :is(.abc, .xyz) y .abc, .xyz fonctionnent de manière presque identique. Cependant, :est permet de ne faire correspondre qu'une partie du sélecteur sans copier plusieurs fois l'ensemble du sélecteur.

Par exemple, si vous voulez faire correspondre .root .abc .child y .root .xyz .child vous pouvez écrire un code comme celui-ci :

.root :is(.abc, .xyz) .child {
   margin-left: 20px;
}  

<div class="root">
  <a class="abc">
    <span class="child">Lorem</span>
  </a>
  <a class="xyz">
    <span class="child">Ipsum</span>
  </a>
</div>

La différence entre :est y où c'est que où est ignorée lors du calcul de la spécificité du sélecteur :

• spécificité de .root :is(.abc, .xyz) .child = spécificité de .root .abc .child
• spécificité de .root :where(.abc, .xyz) .child = spécificité de .root .child

Les deux pseudo-classes acceptent un liste de sélection indulgente Cela signifie que si l'analyse d'un sélecteur échoue (en raison d'une syntaxe non prise en charge, qu'elle soit trop récente, trop ancienne ou simplement incorrecte), les autres sélecteurs continuent de fonctionner. Cela rend :est utile même au niveau de la racine, car elle permet de combiner des sélecteurs en utilisant des fonctionnalités CSS modernes sans craindre qu'un sélecteur ne casse le reste.

P.S. Cette question répond à une variante plus difficile de la question, mais Google renvoie cette page sur trop de requêtes, donc je pense que ces informations seront pertinentes ici.

Answer 3

Il est également possible d'utiliser @extend pour y parvenir avec SCSS.