While I have experience using javascript and php to achieve a certain effect, I am now curious about the possibility of achieving the same effect solely with css.
In my current project, I have a container that houses multiple items. Each item consists of an image followed by a description in a div element. My goal is to have the background color of the description alternate for every other item.
Is it feasible to accomplish this using only css? If so, how can it be done? I have made attempts using selectors such as:
.item:nth-child(odd){background-color:red}
.item .description:nth-of-type(odd){background-color:orange;}
However, I have not been successful in getting it to work. Any tips, suggestions, or comments would be greatly appreciated.
Below is a simplified version of the sample code illustrating what I am working on.
<style>
#container{width:100% height:100%;}
.item {float:left; width:250px; height:700px;}
.item img {width:250px; height:250px; float:left;}
.description {width:250px; height:450px; float:left; background-color:blue;}
.description:nth-of-type(even){background-color:red;} // <- This is the line causing issues!!
</style>
<html>
<body>
<div id="container">
<div class="item"> //Item 1
<img src="image.jpg"/>
<div class="description"> //I want this (and every odd number) to be blue
<h1>Title</h1>
<h2>Sub Title</h2>
<p>Lorem Ipsum dolor sit for Adun!</p>
<a href="#">::LEARN MORE::</a>
</div>
</div>
<div class="item"> //Item 2 and beyond...
<img src="image.jpg"/>
<div class="description"> //And I want this (and every even number, red)
<h1>Title</h1>
<h2>Sub Title</h2>
<p>Lorem Ipsum dolor sit for Adun!</p>
<a href="#">::LEARN MORE::</a>
</div>
</div>
</div>
<body>
</html>