Как выбрать любой другой элемент div класса, используя только CSS (нет js)

Благодарим вас за ваши ответы заранее.

Я знаю, как это сделать, используя javascript и php, но я пытаюсь узнать, как это сделать, если это возможно, используя только css.

У меня есть контейнер, который содержит много элементов. Каждый элемент имеет изображение, а под ним - div, содержащее описание. Я хочу, чтобы описание описания отличалось для каждого другого элемента.

Можно ли достичь этого, используя только css? Если да, то как? Я обманывал себя с помощью селекторов

.item:nth-child(odd){background-color:red}
.item .description:nth-of-type(odd){background-color:orange;}

Кажется, я не понимаю. Предложения, комментарии, все ценится. Еще раз спасибо друзьям. Ниже приведен упрощенный пример кода, который демонстрирует, что я делаю.

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

Ответ 1

Вы хотите nth-child() на .item.

.item:nth-child(odd) .description {
    background-color: red;
}

Демо: _{суб >}

Ответ 2

.item:nth-child(even) {...}
.item:nth-child(odd) {...}

demo: http://jsfiddle.net/DuL24/1/

Ответ 3

Возможно, это возможно, когда мы используем это:

.item:nth-of-type(odd)  .description{background-color:orange;}

или

.item:nth-child(odd) .description{background-color:orange;}

Вы можете увидеть мои скриншоты: http://screencast.com/t/17g9joVj8Z
Надеюсь, вы получите то, что вам нужно.

Ответ 4

вы должны установить элемент nth-of-type в .item:

#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;}
.item:nth-of-type(even) .description {background-color:red;}