CSS3 कॉलम के nth-child

Question

मैं CSS3 columns का उपयोग कर रहा हूं लेकिन मैं अलग-अलग पृष्ठभूमि को अलग-अलग कॉलम पर सेट करने के लिए अलग-अलग प्रत्येक कॉलम को नियंत्रित करना चाहता हूं।

मैं परिणाम के रूप में इस तस्वीर में प्रदर्शित करना चाहते हैं:

html सामग्री:

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

मैं कुछ प्रयोग करना चाहते हैं जैसे:

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

क्या मैं CSS3 :nth-child संपत्ति का उपयोग कर सकता हूं? या क्या मैं किसी भी व्यक्तिगत कॉलम के चयनकर्ता को प्राप्त करने के लिए किसी भी जावास्क्रिप्ट समाधान का उपयोग कर सकता हूं?

कृपया अपने सुझाए गए समाधान दें।

.. अग्रिम

Answer 1

स्टाइल के लिए पूर्ण स्थिति में पृष्ठभूमि ब्लॉकों जोड़े में धन्यवाद इस तरह

कुछ:

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

Fiddle