Альтернативный цвет фона div

У меня есть структура, подобная следующей:

<div class="wrapper"...>
   <a href="#"...>blah</a>
   <div class="post"...>stuff</div>
</div>

И он повторяется на динамической странице несколько раз. Я хотел бы чередовать цвета фона в классе "post" с двумя цветами, но псевдо-класс CSS nth-child, похоже, работает только с элементами, которые являются последовательно последовательными.

Есть ли способ (CSS, Javascript, jQuery и т.д.), чтобы я мог чередовать цвета фона div?

Ответы

Ответ 1

jQuery: нечетные и: даже селекторы довольно удобны:

$(".post:even").css("background-color","blue"); 
$(".post:odd").css("background-color","red");

HTML:

<div class="wrapper">
   <a href="#">blah</a>
   <div class="post">stuff</div>
</div>
<div class="wrapper">
   <a href="#">blah</a>
   <div class="post">stuff</div>
</div>
...

http://jsfiddle.net/thomas4g/uaYd9/2/

ИЗМЕНИТЬ:

Не-jQuery, быстрый способ JS:

var posts = document.getElementsByClassName("post");
for(var i=0;i<posts.length;i++) {
  posts[i].classList.add(i % 2 === 0 ? "even" : "odd");
  //or
  posts[i].style["background-color"] = i % 2 === 0 ? "blue" : "red";
}

Ответ 2

способ jquery:

$('.post:even').css('background-color','green');
$('.post:odd').css('background-color','red');

Ответ 3

Обычно я назначаю класс css "odd" или "even" на задней панели. Например, если страница динамически генерируется в PHP, я бы сделал что-то вроде:

for ($i = 0; $i < count($rows); $i++) {
  $css_class = 'wrapper ';  // Elements can have multiple css classes
  $css_class .= $i % 2 == 0 ? 'row_odd' : 'row_even';
  // generate html using class="$css_class"...
}

Затем определите в своем классе цвета, которые вы хотите, чтобы переменные divs имели.

.row_odd { background-color: white; }
.row_even { background_color: #e0e0ff; }

Ответ 4

Может быть сделано с помощью jquery :odd и :even селекторов довольно легко:

$(".wrapper div.post:odd").addClass('odd'); 
$(".wrapper div.post:even").addClass('even');

http://jsfiddle.net/niklasvh/fULRZ/

Ответ 5

.post:nth-child(odd)

Не работает для вас?