Menu
I know how to do this using javascript and php, but I am trying to learn how/if it is possible to do this using just css.
I have a container which holds many items. Each item has a picture, and below it, a div containing a description. I want the background of the description to be different for every other item.
Is it possible to achieve this using just css? If so, how? I have been fooling around with using the selectors
.item:nth-child(odd){background-color:red} .item .description:nth-of-type(odd){background-color:orange;} I can't seem to get it. Suggestions, comments, anything is appreciated.
Below is some simplified sample code that demonstrates what I have going 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;} // <- Here's the line!! </style> <html> <body> <div id="container"> <div class="item"> //item 1 <img src="image.jpg"/> <div class="description"> //This (and every odd number) I want 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 so on... <img src="image.jpg"/> <div class="description"> //and 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> 
495
The :nth-child(odd) property will target every other item of the element you have selected.
class selector selects elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the name of the class.
The :nth-child(n) selector matches every element that is the nth child of its parent. n can be a number, a keyword (odd or even), or a formula (like an + b). Tip: Look at the :nth-of-type() selector to select the element that is the nth child, of the same type (tag name), of its parent.
You want nth-child() on .item.
.item:nth-child(odd) .description { background-color: red; } Demo: 
93
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
