divタグの背景色が異なる

Question

CSSで4種類の背景色を設定するより良い方法があるのだろうかと思います。私は次のセットアップを行う必要があります。

は、私は私が作ったこの横に作ることができ、より清潔で素敵なコードがあり、またはこれはそれを行うための唯一の方法ですか？コードはちょうど私の意見の後に本当に醜い探しています。

<div class="bg1"></div> 
<div class="bg2"></div> 
<div class="bg3"></div> 
<div class="bg4"></div> 



.bg1 { 
    background-color: blue; 
} 
.bg2 { 
    background-color: red; 
} 
.bg3 { 
    background-color: green; 
} 
bg4 { 
    background-color: purple; 
} 

Answer 1

Personnalyを役に立てば幸い：

<div class="square square-blue"></div> 
<div class="square square-red"></div> 
<div class="square square-green"></div> 
<div class="square square-purple"></div> 

とCSSでの：

.square{ 
    border: 1px solid black; // and all params 
} 
.square-blue { 
    background-color: blue; 
} 
.square-green { 
    background-color: green; 
} 
.square-purple { 
    background-color: purple; 
} 
.square-red { 
    background-color: red; 
} 

を読みやすくするために使用します（BEM-http://getbem.com/introduction/の小さな使用法）。

Answer 2

あなたは=スタイルを追加することができます：あなたは本当に（私はこのような状況を想像することはできません）ので、テンプレートエンジンのいくつかの制限をしなければならなかったが、どのような場合には、それぞれのdivに「背景色＃123456」あなたは文脈の中でうまくいます。

EDIT：私が言いたいのは、あなたが持っていたいと思ったら、虹の効果を言うことです。 Perl/TemplateToolkitでは、私は次のようなものを見ることができました：

[% for ($code = 0; $code < $whatever_max_hex_is'; $code++) { %] 
<div style='background-color: [%$code%]'></div> 
[%END%] 

そういうものです。完全にテストされていないが、私はあなたがドリフトを得ると確信しています。

Answer 3

あなたはここでn番目の子/ n番目-の型を使用

は、次のコードスニペットを確認することができます。

.container div:nth-child(1) { 
 
    background: blue; 
 
} 
 
div:nth-of-type(2) { 
 
    background: red; 
 
} 
 
div:nth-of-type(3) { 
 
    background: green; 
 
} 
 
div:nth-of-type(4) { 
 
    background: purple; 
 
} 
 
.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.container div { 
 
    width: 100vw; 
 
    height: 50px; 
 
}

<div class="container"> 
 
    <div class="bg1"></div> 
 
    <div class="bg2"></div> 
 
    <div class="bg3"></div> 
 
    <div class="bg4"></div> 
 
</div>

それは私がそれだろう、