¿Cómo puedo aplicar estilos a varias clases a la vez?

277

Quiero que dos clases con nombres diferentes tengan la misma propiedad en CSS. No quiero repetir el código.

.abc {
   margin-left:20px;
}  
.xyz {
   margin-left:20px;
}
<a class="abc">Lorem</a>
<a class="xyz">Ipsum</a>

Como ambas clases están haciendo lo mismo, debería poder fusionarlo en uno. ¿Cómo puedo hacer eso?

se sentó
fuente

Respuestas:

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

es lo que buscas.

Juraj Blahunka
fuente
66
+1, exactamente lo que estaba buscando. También puede tener una segunda entrada separada para .abc y / o .xyz para propiedades que no desea aplicar a ambos, por ejemplo .xyz {font-weight: bold;} se combinará para hacer que .xyz bold y margin- dejado 20px pero .abc solo margen izquierdo.
RyanfaeScotland
64

Puede tener varias declaraciones CSS para las mismas propiedades separándolas con comas:

.abc, .xyz {
   margin-left: 20px;
}
zombat
fuente
1
Aunque la respuesta seleccionada es completamente correcta, no podemos garantizar que los novatos entiendan lo que está haciendo. Yo iría con el explicado más. Como se trata más de "cómo pescar" en lugar de "aquí está el pez".
Olgun Kaya
15

No repitas tu CSS

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

O

 a{
    margin-left:20px;
 }
Nitekurs
fuente
2
Creo que abcse entiende como un nombre de clase ... y xyzcomo otro. Su sugerencia es usar un nombre de clase común para propiedades comunes que es innecesario y confuso, dada la pregunta.
Arete
4

Si usa lo siguiente, su código puede ser más efectivo de lo que escribió. Deberías agregar otra función.

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

O

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

O

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