¿Cómo selecciono cualquier otro elemento de clase div usando solo CSS (sin js)


Gracias amablemente por sus respuestas de antemano.

Sé cómo hacer esto con javascript y php, pero estoy tratando de aprender cómo/si es posible hacer esto usando solo css.

Tengo un contenedor que contiene muchos artículos. Cada elemento tiene una imagen, y debajo de ella, un div que contiene una descripción. Quiero que el fondo de la descripción sea diferente para cada otro elemento.

Es posible lograr esto usando solo css? Si es así, ¿cómo? He estado tonteando con uso de los selectores

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

Parece que no puedo entenderlo. Sugerencias, comentarios, cualquier cosa es apreciada. Gracias de nuevo amigos. A continuación se muestra un código de ejemplo simplificado que demuestra lo que tengo en marcha.

<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>
Author: Jaime, 2013-02-20

4 answers

Quieres nth-child() en .item.

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

Demo: jsFiddle

 45
Author: ThinkingStiff,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-20 18:08:18
.item:nth-child(even) {...}
.item:nth-child(odd) {...}

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

 7
Author: Eric Goncalves,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-20 18:09:13

Tal vez sea posible cuando usamos esto:

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

O

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

Puedes ver mis capturas de pantalla: http://screencast.com/t/17g9joVj8Z
Espero que consigas lo que necesitas.

 2
Author: Sourceforest,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-08-18 19:21:56

Debe establecer nth-of-type a .item element:

#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;} 
 0
Author: starowere,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-20 18:13:31