web-dev-qa-db-fra.com

Comment puis-je sélectionner tous les autres éléments de la classe div en utilisant uniquement CSS (pas de js)

Merci d'avance pour vos réponses.

Je sais comment faire cela en utilisant javascript et php, mais j'essaie d'apprendre comment/s'il est possible de le faire en utilisant simplement CSS.

J'ai un conteneur qui contient de nombreux articles. Chaque élément a une image, et en dessous, un div contenant une description. Je veux que l'arrière-plan de la description soit différent pour chaque autre élément.

Est-il possible d'y parvenir en utilisant simplement CSS? Si c'est le cas, comment? J'ai joué avec les sélecteurs

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

Je n'arrive pas à comprendre. Suggestions, commentaires, tout est apprécié. Merci encore mes amis. Vous trouverez ci-dessous un exemple de code simplifié qui montre ce que je fais.

<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>
htmlcsscss3css-selectors
36
Jaime

Vous voulez nth-child() sur .item.

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

Démo:  jsFiddle

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

démo: http://jsfiddle.net/DuL24/1/

8
Eric Goncalves

C'est peut-être possible lorsque nous utilisons ceci:

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

ou

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

Vous pouvez voir mes captures d'écran: http://screencast.com/t/17g9joVj8Z
J'espère que vous obtiendrez ce dont vous avez besoin.

2
Sourceforest

vous devez définir le nième de type sur l'élément .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;}
0
starowere