Cow Computing

10 Feb 7

HTML 5 nth-Child

As we all know, HTML 5 is on its way, and there’s going to be a huge addition to the current syntax. In this post, i shall share with you about the “nth-child” feature. Often, we would like to create a table or list with alternate row color as follow:

// HTML Snippet
<div id="test-area">
  <ul>
    <li>row 1</li>
    <li class="even-row">row 2</li>
    <li>row 3</li>
    <li class="even-row">row 4</li>
    <li>row 5</li>
    <li class="even-row">row 6</li>
    <li>row 7</li>
    <li class="even-row">row 8</li>
    <li>row 9</li>
    <li class="even-row">row 10</li>
  </ul>
</div>

// CSS Snippet
ul {
  list-style: none;
}

// color the even rows
.even-row {
  background-color: #ccc;
}