Question

I am creating a message system in which users can quote the messages of other users. It works fine for one quote but when I have multiple quotes I would like to be able to visually distinguish between them.

I am using the “nth child” selector to try and give each 2nd quote block a different visual style ie even row.

I have the following HTML structure for a post containing 4 quotes inside it ie one quote quoting another.

<div class='post_container'>
<blockquote><cite>Quote: user1</cite>

<blockquote><cite>Quote: user2</cite>

<blockquote><cite>Quote: user3</cite>
<blockquote><cite>Quote: user4</cite>

<p>post1</p>
</blockquote>
<p>post2</p>
</blockquote>

<p>post3</p>
</blockquote>

<p>post4</p>
</blockquote>
</div>

The CSS code I am using is as follows:

.post_container blockquote{
    padding:10px;
    margin:10px;
    background-color:#000000;
}

.post_container blockquote *:nth-child(even){
    border:thick;
    background-color:#3FF;
}


.post_container blockquote>cite{
    font-weight:bold;
    font-size:16px;
    background-color:#999999;   
}

.post_container blockquote *>div:nth-child(2){
    background-color:#3FF;
}

Here is how it looks in HTML currently:
http://jsfiddle.net/5Jjxj/6/

Answer 1

use .post_container blockquote:nth-child(even) *

instead of .post_container blockquote *:nth-child(even){