Выбор альтернативных дивов

Question

У меня есть код вроде этого:

<div class="right_col">

   <div class="right_box">
      <div class="other_div">text</div>
      text etc
   </div>

   <div class="right_box">
      <div class="other_div">text</div>
      text etc
   </div>


   <div class="right_box">
      <div class="other_div">text</div>
      <div class="anotherother_div">text</div>
      text etc
   </div>

   <div class="right_box">
      text etc
   </div>

</div>

Таким образом, основной div с другими div внутри, которые могут содержать или не содержать дополнительные div.Что я хочу сделать, так это стилизовать их так, чтобы у «right_box» были альтернативные цвета фона.Проблема в том, что я выбираю внутренние элементы div / учитываю их при выполнении нечетных / четных операций и т. Д.

Это CSS, который я пробовал:

.right_col .right_col:nth-child(even) {background:red}
.right_col .right_col:nth-child(0n+1) {background:red}

Любые идеи, где яне так?

Answer 1

Вы должны использовать nth-of-type(), а не nth-child().

Вот замечательная статья Криса Койера о CSS-хитростях, которая объясняет разницу между ними.