¿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?

Respuestas:


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

es lo que buscas.


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;
}

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;
 }

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;
} 
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.