Search code examples
cssstylesheet

Styling alternate blockquotes with different colors

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>
Solution

  • 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;
}