Como posso aplicar estilos a várias classes ao mesmo tempo?

277

Eu quero duas classes com nomes diferentes para ter a mesma propriedade em CSS. Não quero repetir o código.

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

Como as duas classes estão fazendo a mesma coisa, eu devo ser capaz de mesclar em uma. Como eu posso fazer isso?

css css-selectors Sentou
fonte

Respostas:

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

é o que você está procurando.

Juraj Blahunka
fonte
6
+1, exatamente o que eu estava procurando. Você também pode ter uma segunda entrada separada para .abc e / ou .xyz para propriedades que não deseja aplicar a ambas, por exemplo, .xyz {font-weight: bold;} será combinada para tornar .xyz em negrito e margem- deixado em 20px, mas .abc apenas em margem esquerda.
RyanfaeScotland
64

Você pode ter várias declarações CSS para as mesmas propriedades, separando-as com vírgulas:

.abc, .xyz {
   margin-left: 20px;
}
zombat
fonte
1
embora a resposta selecionada esteja completamente correta, não podemos garantir que os novatos entendam o que estão fazendo. Eu iria com o explicado mais. Uma vez que é mais "como pescar" em vez de "aqui está o peixe".
precisa saber é o seguinte
15

Não repita seu CSS

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

OU

 a{
    margin-left:20px;
 }
Nitekurs
fonte
2
Eu acho que abcfoi concebido como um nome de classe ... e xyzcomo outro. Sua sugestão é usar um nome de classe comum para propriedades comuns que é desnecessário e confuso, dada a pergunta.
Arete 13/06
3

Se você usar o seguinte, seu código poderá ser mais eficaz do que você escreveu. Você deve adicionar outro recurso.

.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
fonte