<div class="outer">
  <h3>リストの奇数の項目に地をつける</h3>
  <ul class="todo-list">
    <li class="todo-item">買い物</li>
    <li class="todo-item">片付け</li>
    <li class="todo-item">洗濯</li>
    <li class="todo-item">読書</li>
    <li class="todo-item">散歩</li>
  </ul>
</div>
.outer {
  margin: 20px;
}

.todo-list {
  /* リセット */
  list-style: none;
  padding: 0;
  margin: 0;
}
.todo-item {
  padding: 5px 10px;
}
.todo-item:nth-child(odd) {
  background-color: #eee;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.