Styling alternate blockquotes with different colors

Question

I have the following code. I want to have different background color for blockquotes having innertext Text2 & Text4, and different background for blockquotes having innertext Text1 & Text3. Need help.

<div class="quotes">
<blockquote>Text1</blockquote>
<blockquote>Text2</blockquote>
<blockquote>Text3</blockquote>
<blockquote>Text4</blockquote>
</div>

It's not possible to match text in CSS3, can you use javascript ? — singe3, Aug 07 '14 at 11:40
don't want to match content. Just want to have different backgrounds for even and odd blockquotes. — Arslan Bhatti, Aug 07 '14 at 11:42
In that case edit your question because you did say you wanted to match inner text — singe3, Aug 07 '14 at 11:43
possible duplicate of [Different CSS style on odd and even rows](http://stackoverflow.com/questions/5096433/different-css-style-on-odd-and-even-rows) — Cody Gray - on strike, Sep 08 '14 at 08:11

Bhojendra Rauniyar · Accepted Answer · 2014-08-07T11:47:17.617

4

You can use nth-child selector:

Ex-

blockquote:nth-child(1){ /*for first blockquote */
  background-color: red;
}
blockquote:nth-child(2){ /*for second blockquote */
   background-color: red;
}

As per your comment:

You can use odd and even too:

blockquote:nth-child(odd){
   background-color: red;
}


blockquote:nth-child(even){
   background-color: red;
}

edited Aug 07 '14 at 11:47

answered Aug 07 '14 at 11:41

Bhojendra Rauniyar

83,432
35
168
231

can i do this while using in-line style to div? and there can be multiple blockquotes. – Arslan Bhatti Aug 07 '14 at 11:44
I am doing this in wordpress and my actual code is something like this:
[li_recommendations width="480" length="200" interval="1000"]
– Arslan Bhatti Aug 07 '14 at 11:50
and there are coming blockquote in [li_recommendations width="480" length="200" interval="1000"]. Now I want to show alternate blockquote with different background colors – Arslan Bhatti Aug 07 '14 at 11:51
so there will be only 2 colors or 3 colors? – Kheema Pandey Aug 07 '14 at 11:53
Yes there will be only 2 colors. – Arslan Bhatti Aug 07 '14 at 11:55
I might be inclined to use `nth-of-type` over `nth-of-child` for added comfort just in case of intervening elements. – Paulie_D Aug 07 '14 at 11:58

score 1 · Answer 2 · answered Aug 07 '14 at 11:47

1

Try this:

blockquote:nth-child(even){
  background-color: red;
}
blockquote:nth-child(odd){
   background-color: blue;
}

answered Aug 07 '14 at 11:47

AmanVirdi

1,667
2
22
32

Yes but it will give alternate color. – AmanVirdi Aug 07 '14 at 11:50

Styling alternate blockquotes with different colors

2 Answers2