CSS selector nth doesn't work like it should?-CodePudding

I'm new to the forum and I hope someone can help me :)

I've been installing a WP in a subfolder on a server and while I was tweaking the CSS via WP dashboard I've been stuck on a nth-of-type problem. The odd work but the even isn't, and I'm not sure what I can do about it, so here is the html code :

<div  id="posts" style="position: relative; height: 586.233px;">
    <div  style="position: absolute; left: 0px; top: 0; opacity: 1;">
        <div id="post-83" >
            <figure >
                <img src="" height="508">
                <a  href="" rel="bookmark">
                    <p >View →</p>
                </a>
            </figure><!-- .featured-media -->
        </div><!-- .post -->
    </div><!-- .post-container -->

    <div  style="position: absolute; left: 292.383px; top: 0px; opacity: 1;">
        <div id="post-48" >
            <figure >
                <img src=""  alt="" decoding="async" loading="lazy" srcset="" sizes="(max-width: 508px) 100vw, 508px" width="508" height="1129">
                <a  href="" rel="bookmark">
                    <p >View →</p>
                </a>
            </figure><!-- .featured-media -->
        </div><!-- .post -->
    </div><!-- .post-container -->

    
</div><!-- .posts -->

And the css used to alter the background of the posts :


/* Paragraphes impairs */
.posts .post-container > div:nth-of-type(odd){
  background: red;
  padding:68px;
}

/* Paragraphes pairs */
.posts .post-container > div:nth-of-type(even) {
  background: blue;
}

As you can see @ mahidev.fr/Mictlan the odd css is applied but not the even.

I've tried to use nth-child too to no avail, i've also put all of the post in the same category and put 2 more pictures since the post in case it came from there but still didn't changed anything.

I just want my background color to alternate for each posts, but i'm not sure about my next step.

PS : I've only deleted the src that got me spam flagged :)

CodePudding user response：

There is no even child of .post-container. You can however look for even or odd of .post-container itself.

/* Paragraphes impairs */
.posts .post-container:nth-of-type(odd) > div{
  background: red;
  padding:68px;
}

/* Paragraphes pairs */
.posts .post-container:nth-of-type(even) > div {
  background: blue;
}