web-dev-qa-db-ja.com

CSSのみ（jsなし）を使用して他のすべてのdivクラス要素を選択する方法

よろしくお願いいたします。

私は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'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

_.item_でnth-child()が必要です。

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

デモ： jsFiddle

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

デモ： http://jsfiddle.net/DuL24/1/ （

8
Eric Goncalves

これを使用すると可能性があります。

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

または

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

私のスクリーンショットを見ることができます： http://screencast.com/t/17g9joVj8Z
必要なものが手に入ることを願っています。

2
Sourceforest

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;}
0
starowere