how to style every html posts differently in css - html

Question

I have 4 posts in my HTML page, they look same except the text content and images and colors of text and background, in the image below you will find the result that i want:
my question is how can i style every post without creating class css for every post i want just change colors
this i my code
.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>
détails <span class="icon-circle-plus"></span>
</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>
détails <span class="icon-circle-plus"></span>
</div>
</article>
</section>
thanks for helping

Answer 1

Use the :nth-of-type(n) pseudo selector to style them individually.
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>

Answer 2

Use e.g.
article:nth-of-type(1) .rect-date-even {
background-color: green;
}
This selects all elements with the class rect-date-even that are descendants to any article that is the first article inside its parent element.
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
nth-child (which you have tried) does not take into account element name (or class or whatever) - all it ever asks is
Am I the nth-child of my parent (regardless of element name, class, id, attributes whatever)?
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child