How to change the background of wordpress posts and leave each one with a different color?

Question

Hello, I’m having a problem. I’m trying to make each post have a different background color. I tried using this code below in css but it leaves all posts one color.

div.postagem > div:nth-child(1) {
    background: #edc333;
}

div.postagem > div:nth-child(2) {
    background: #000;
}

div.postagem > div:nth-child(3){
    background: #3e4095;
}

This is the code I have in my post area:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div class="col-md-4"><div class="postagem">

<div class="postagem-imagem">
<?php
if ( has_post_thumbnail() ) {
    the_post_thumbnail( 'miniatura' );
} ?></div> 

<div class="titulo"> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></div>

</div></div>


<?php endwhile?>
<?php else: ?>
<h2>Nada Encontrado</h2><?php endif; ?> 

This is the code I have in css.

.postagem {
    height: 340px;
    overflow: hidden;

}
.postagem img {
    opacity: 0.2;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

.postagem-imagem img {
    opacity: 0.3;
}

.titulo {
    font-size: 17.473px;
    font-family: "Arial";
    color: rgb(254, 255, 254);
    font-weight: 900;
    padding: 20px;
    text-transform: uppercase;
    line-height: 1.2;
    text-align: left;
    position: absolute;
    z-index: 111;
    top: 45px;

}

.titulo a {
    color: #fff;
}

Can anyone help? Thank you in advance!

Answer 1

The problem is that div .postagem is the only daughter of the div .col-md-4, then the CSS :nth-child(2) and :nth-child(3) do not apply. If you change the class .postagem to where the class is already .col-md-4 must solve.

For your case, the following will work, because the div.col-md-4 is that they are sisters, it is possible to focus on different ones using the :nth-child, see below the example.

.container {
  margin: 20px;
}

.postagem {
  border: solid 1px #6c757d;
  padding: 10px;
}

.col-md-4:nth-child(1) > .postagem {
  background: #edc333;
}

.col-md-4:nth-child(2) > .postagem {
  background: #000;
}

.col-md-4:nth-child(3) > .postagem {
  background: #3e4095;
}

<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="postagem">1 de 3</div>
    </div>
    <div class="col-md-4">
      <div class="postagem">2 de 3</div>
    </div>
    <div class="col-md-4">
      <div class="postagem">3 de 3</div>
    </div>
  </div>
</div>

And also on Jsfiddle