How to use nth-child with only direct children?

I have this the html below and in my CSS I write .CommentSection :nth-child(5n)

Instead of every 5th comment box being changed li .Hide is being changed an other elements. How do I make it so only the direct children (always div class="comment") are count开发者_Python百科ed and applied to and not counting its children?

<div class="CommentSection">
  <div class="comment" id="c19">
    <ul>
        <li class="username">a</li>
        <li class="date">3/2/2010 6:14:51 AM</li>
        <li class="link"><a href="http://localhost:1223/u/a#c19">Permalink</a></li>
        <li class="flag">Flag</li>
        <li class="Hide"><a href="http://localhost:1223/u?hide=1&amp;t=8&amp;c=19&amp;ret=/u/a">Hide</a></li>
        <li class="delete">Delete</li>
        <li class="reply">Reply</li>
    </ul>

    <div class="text">
      <p>asd</p>
    </div>
  </div>
...
</div>

---

.CommentSection > :nth-child(5n) or .CommentSection .comment:nth-child(5n)

---

Try this:

.CommentSection > div.comment:nth-child(5n)

This will select every 5th DIV with the class comment that is a direct child of CommentSection.

---

Try this

.CommentSection .comment:nth-child(5n){
  […]
}

Or more specific:

.CommentSection > .comment:nth-child(5n) {
  […]
}

This should work fine as well:

.CommentSection > :nth-child(5n) {
  […]
}