Applying div:nth-child to just the main div and not everything in it


I might not be explaining this too well, but I'm trying to apply the alternating div:nth class to just the indicated div (al-articles), but its getting applied to each child div inside <div class="al-articles"> - any pure css solution? This is for a WP category archive page and I want the post excerpts to have alternating background colors.

Below is the css I'm using

.al-articles {

.al-articles div:nth-child(odd) {

.al-articles div:nth-child(even) {

Thanks in advance

Problem courtesy of: Leaky Eddie


This is happening because you're telling the CSS to apply those styles to ALL divs that are children of .al-articles, not the .al-articles div itself.

Try this:

.al-articles:nth-child(odd) {

.al-articles:nth-child(even) {
Solution courtesy of: Tim


Just give an id to the main div eg

         <div id="main">

          Content goes here!!!


and put inside it whatever you want. Then to style it:


     style goes here

Discussion courtesy of: user3968801

This recipe can be found in it's original form on Stack Over Flow.