CSSで各HTML投稿を違うスタイルにする方法

Question

私のHTMLページには4つの投稿がありますが、テキストの内容と画像とテキストと背景との色を除いて同じように見えます。

私の質問は、私はちょうど色

この私に私のコード

.art-content { 
 
    position: relative; 
 
} 
 
.art-content img { 
 
    width: 100%; 
 
} 
 
.main-content article { 
 
    margin-top: 15px; 
 
} 
 
.main-content article:nth-child(2n) { 
 
    padding-left: 0px; 
 
} 
 
.main-content article:nth-child(2n+1) { 
 
    padding-left: 15px; 
 
    padding-right: 0px; 
 
} 
 
.main-content article:nth-child(2n) { 
 
    padding-left: 0px; 
 
} 
 
.main-content article:nth-child(2n+1) { 
 
    padding-left: 15px; 
 
    padding-right: 0px; 
 
} 
 
.rect-date-even { 
 
    position: absolute; 
 
    display: block; 
 
    background-color: #c2022a; 
 
    width: 75px; 
 
    height: 77px; 
 
    top: 0; 
 
    left: 0; 
 
    text-align: center; 
 
    padding: 9px 6px 15px 4px; 
 
} 
 
.rect-date-even span { 
 
    font-family: 'Quicksand'; 
 
    font-size: 20px; 
 
    color: white; 
 
    padding-bottom: -10px; 
 
} 
 
.rect-info-art { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 105px; 
 
    background-color: #dcdcdc; 
 
} 
 
.rect-cat { 
 
    position: absolute; 
 
    width: 120px; 
 
    height: 18px; 
 
    background-color: #c2022a; 
 
    color: white; 
 
    font-family: 'Quicksand'; 
 
    font-size: 12px; 
 
    padding-left: 3px; 
 
    top: 10px; 
 
    left: 25px; 
 
} 
 
.rect-info-art p { 
 
    position: absolute; 
 
    font-style: italic; 
 
    font-size: 18px; 
 
    max-height: 10px; 
 
    padding-right: 50px; 
 
    top: 30px; 
 
    left: 25px; 
 
} 
 
.rect-info-art a { 
 
    position: absolute; 
 
    color: #c2022a; 
 
    font-size: 14px; 
 
    text-align: center; 
 
    top: 70px; 
 
    right: 20px; 
 
}

<section class="col-md-8 col-lg-8 main-content"> 
 
    <div class="title-section-bg"> 
 
    <img src="assets/img/ombre-title-section.png"> 
 
    <div></div> 
 
    <span class="icon-megaphone"></span> 
 
    <h2>Prochainement a Rabat</h2> 
 
    </div> 
 
    <article class="col-md-6 col-lg-6 art-content"> 
 
    <img src="assets/img/IMG-even1.png"> 
 
    <div class="rect-date-even"> 
 
     <span>03</span> 
 
     <span>AVR</span> 
 
    </div> 
 
    <div class="rect-info-art"> 
 
     <div class="rect-cat">Musique du monde</div> 
 
     <p>Rihanna en concert à Mawazine 2015</p> 
 
     <a href="">détails <span class="icon-circle-plus"></span></a> 
 
    </div> 
 

 
    </article> 
 
    <article class="col-md-6 col-lg-6 art-content"> 
 
    <img src="assets/img/IMG-even1.png"> 
 
    <div class="rect-date-even"> 
 
     <span>03</span> 
 
     <span>AVR</span> 
 
    </div> 
 
    <div class="rect-info-art"> 
 
     <div class="rect-cat">Musique du monde</div> 
 
     <p>Rihanna en concert à Mawazine 2015</p> 
 
     <a href="">détails <span class="icon-circle-plus"></span></a> 
 
    </div> 
 

 
    </article> 
 
</section>

を変更したいすべてのポストのためのクラスCSSを作成せずに、すべてのポストのスタイルを設定する方法であります

Answer 1

使用例

article:nth-of-type(1) .rect-date-even { 
    background-color: green; 
} 

これは、親要素内の最初article任意articleの子孫であるクラスrect-date-evenを持つすべての要素を選択します。 （あなたは試してみました）

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type

nth-childはないは考慮要素名（またはクラスまたは何を）取るん - それは今までに頼むすべては

アイ・アムです私の親のnth-child（要素名、クラス、id、属性とは関係なく）？

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Answer 2

は、それらを個別にスタイルを:nth-of-type(n)擬似セレクタを使用して助けてくれてありがとう。

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 5px; 
 
} 
 

 
div:nth-of-type(1) p { 
 
    background-color: red; 
 
} 
 
div:nth-of-type(2) p { 
 
    background-color: blue; 
 
} 
 
div:nth-of-type(3) p { 
 
    background-color: yellow; 
 
} 
 
div:nth-of-type(4) p { 
 
    background-color: green; 
 
}

<div><p>hello</p></div> 
 
<div><p>hello</p></div> 
 
<div><p>hello</p></div> 
 
<div><p>hello</p></div>