alternate coloring of divs of a repeating html structure via css

alternate coloring of divs of a repeating html structure via css

<article class="tweet-inner">
<div class="text-wrapper">
<div class="tweet">
<div class="text">
<p>Coming down! Time for Croation BBQ </p>
</div>
<p class="last">
<span class="pull-right">
<small> Hello this is first text </small>
<small> Hello this is second text </small>
</span>
</p>
</div>
</div>
</article>
I have the following repeating html structure.
As of now, I want to provide alternate rows with different background. The
element which I want to color is class=text
I do the following in my css -
.tweet-inner .tweet .text-wrapper .text:nth-child(even) {
background-color: #FF0000;
}
This does not work, I also tried -
.text:nth-child(even) {
background-color: #FF0000;
}
This is what works -
article.text:nth-child(even) {
background-color: #FF0000;
}
But I want the .text to be alternately colored, not the entire article.
This also does not work.
The fiddle is http://jsfiddle.net/LKqvz/. Please let me know.