Как выбрать каждый другой элемент класса 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'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>
4 ответов
возможно, это возможно, когда мы используем это:
.item:nth-of-type(odd) .description{background-color:orange;}
или
.item:nth-child(odd) .description{background-color:orange;}
вы можете увидеть мои скриншоты:http://screencast.com/t/17g9joVj8Z
Надеюсь, ты получишь то, что тебе нужно.
вы должны установить значение nth-of-type .элемент элемента:
#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;}