nth-child of CSS3 columns

Question

I'm using CSS3 columns but i want to control each column individually to set different backgrounds to even / odd columns.

I want the result to be as shown in this picture:

The html content:

<div id="content">
    content body text content body text content body text 
    content body text content body text content body text content body text
    content body text content body text content body text content body text
    content body text content body text content body text content body text 
    content body text content body text content body text content body text 
    content body text content body text content body text content body text 
    content body text content body text content body text content body text 
</div>

Css:

#content {
   column-gap:25px;
   column-count:3;
}

I want to use something like:

column:nth-child(even)
{
   background:#0000ff;
}

Can i use CSS3 :nth-child property? or can i use any javascript solution to get selector of any individual column?

Please give your suggested solutions.

Thank you in advance

Answer 1

Add absolute positioned background blocks for styling..

Something like this:

#bg1 {
  position: absolute; 
  width:30%;
  height:100%;
  background-color:green;
  z-index:-1;
}

Fiddle