javascript - nth-child of CSS3 columns -

i'm using css3 columns want control each column individually set different backgrounds / odd columns.

i want result shown in 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 use like:

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

can use css3 :nth-child property? or can use javascript solution selector of individual column?

please give suggested solutions.

thank in advance

add absolute positioned background blocks styling..

something this:

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

fiddle