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

277

Je veux que deux classes avec 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>
Développer l'extrait

Comme les deux classes font la même chose, je devrais pouvoir les fusionner en une seule. Comment puis je faire ça?

css css-selectors Sam
la source

Réponses:

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

est ce que vous recherchez.

Juraj Blahunka
la source
6
+1, exactement ce que je cherchais. Vous pouvez également avoir une deuxième entrée distincte pour .abc et / ou .xyz pour les propriétés que vous ne souhaitez pas appliquer aux deux, par exemple .xyz {font-weight: bold;} se combinera pour rendre .xyz bold et margin- laissé par 20px mais .abc seulement par marge gauche.
RyanfaeScotland
64

Vous pouvez avoir plusieurs déclarations CSS pour les mêmes propriétés en les séparant par des virgules:

.abc, .xyz {
   margin-left: 20px;
}
zombat
la source
1
bien que la réponse choisie soit complètement correcte, nous ne pouvons pas garantir que les débutants comprendront ce qu'il fait. J'irais avec celui expliqué plus. Puisqu'il s'agit plus de "comment pêcher" au lieu de "voici le poisson".
Olgun Kaya
15

Ne répétez pas votre CSS

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

OU

 a{
    margin-left:20px;
 }
Nitekurs
la source
2
Je pense que abcc'était un nom de classe ... et xyzun autre. Votre suggestion est d'utiliser un nom de classe commun pour les propriétés communes, ce qui est inutile et déroutant, étant donné la question.
Arete
4

Si vous utilisez comme suit, votre code peut être plus efficace que ce que vous avez écrit. Vous devez ajouter une autre fonctionnalité.

.abc, .xyz {
margin-left:20px;
width: 100px;
height: 100px;
}

OU

a.abc, a.xyz {
margin-left:20px;
width: 100px;
height: 100px;
}

OU

a {
margin-left:20px;
width: 100px;
height: 100px;
}
Fatih Kaan AÇIKGÖZ
la source