Question

I have code sort of like this:

<div class="right_col">

   <div class="right_box">
      <div class="other_div">text</div>
      text etc
   </div>

   <div class="right_box">
      <div class="other_div">text</div>
      text etc
   </div>


   <div class="right_box">
      <div class="other_div">text</div>
      <div class="anotherother_div">text</div>
      text etc
   </div>

   <div class="right_box">
      text etc
   </div>

</div>

So a main div with other divs inside which may or may not contain additional divs.
What I want to do is style them so “right_box” has alternate background colours.
The problem is that I am selecting the interior divs/taking them into account when doing odd/even etc.

This is the CSS I’ve tried:

.right_col .right_col:nth-child(even) {background:red}
.right_col .right_col:nth-child(0n+1) {background:red}

Any ideas where I’m going wrong?

Answer 1

You should be using nth-of-type() rather then nth-child().

Here’s an awesome article on CSS-Tricks by Chris Coyer which explains the difference between the two.