<ul>
  <li> 1</li>
  <li> 2 </li>
  <li> 3 </li>
  <li> 4 </li>
  <li> 5 </li>
  <li> 6 </li>
  <li> 7 </li>
  <li> 8 </li>
  <li> 9 </li>
  <li> 10 </li>
</ul>
ul { text-align: center;}
ul li {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: #f7f7f7;
  border: solid 1px #ccc;
  padding: 10px;
  margin: 5px;
}
li:nth-child(odd) { 
  background-color: #FFD986; 
}

li:nth-child(even) { 
  background-color: #EFFFAB; 
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.