複数のクラスにスタイルを一度に適用するにはどうすればよいですか?


277

CSSで名前の異なる2つのクラスに同じプロパティを設定します。コードを繰り返したくありません。

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

両方のクラスが同じことをしているので、それを1つにマージできるはずです。どうやってやるの?

回答:


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

あなたが探しているものです。


6
+1、まさに私が探していたもの。次に、両方に適用したくないプロパティの.abcや.xyzの2つ目の個別のエントリを作成することもできます。たとえば、.xyz {font-weight:bold;}は、.xyzを太字とマージンにするために結合されます。 20pxだけ左寄せされましたが、.abcはマージン左寄せのみです。
RyanfaeScotland 2014

64

カンマで区切ることにより、同じプロパティに複数のCSS宣言を含めることができます。

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

1
選択された答えは完全に正しいですが、初心者がそれが何をしているかを理解することを保証することはできません。もっと説明された方と一緒に行きます。「ここが魚だ」ではなく「魚の釣り方」が多いからです。
Olgun Kaya

15

CSSを繰り返さないでください

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

または

 a{
    margin-left:20px;
 }

2
abcあるクラス名を意味していると思いますxyz。あなたの提案は、質問を考えると、不必要で混乱を招く共通のプロパティに共通のクラス名を使用することです。
Arete

3

次のように使用すると、作成したコードよりも効果的なコードになる可能性があります。別の機能を追加する必要があります。

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

または

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

または

a {
margin-left:20px;
width: 100px;
height: 100px;
} 
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.