I need to style nested blockquotes with alternating colors. Here is my markup:
<div class="reply">
<blockquote class="reply">
text
<blockquote class="reply">
text
<blockquote class="reply">
text
</blockquote>
</blockquote>
</blockquote>
</div>
This is my CSS:
.reply blockquote.reply:nth-child(even) {
background: #d7eff4;
border: 1px solid #00B9E4;
}
.reply blockquote.reply:nth-child(odd) {
background: #a7e2ef;
border: 1px solid #00B9E4;
}
I've tried both nth-of-type
and nth-child
. nth-of-type
doesn't work (in Chrome, at least). `nth-child works for levels 1 and 2 but not level 3. It thinks level 3 is even. How do I get the colors to alternate?