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

Problem

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 {
  Padding:0;
}

.al-articles div:nth-child(odd) {
  background:#cccac6;
}

.al-articles div:nth-child(even) {
   background:#f0eeec;
}

Thanks in advance

Problem courtesy of: Leaky Eddie

Solution

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) {
  background:#cccac6;
}

.al-articles:nth-child(even) {
   background:#f0eeec;
}
Solution courtesy of: Tim

Discussion

Just give an id to the main div eg

         <div id="main">

          Content goes here!!!

         </div>

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

   #main{


     style goes here

       }
Discussion courtesy of: user3968801

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