Làm thế nào để sử dụng nth-child chỉ với trẻ em trực tiếp?

Question

Tôi có html dưới đây và trong CSS của tôi, tôi viết .CommentSection :nth-child(5n)

Thay vì mỗi hộp nhận xét thứ 5 được thay đổi li. Hiện đang được thay đổi thành một phần tử khác. Làm thế nào để tôi làm cho nó như vậy chỉ trẻ em trực tiếp (luôn luôn div class="comment") được tính và áp dụng và không đếm con của nó?

<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> 

Answer 1

.CommentSection > :nth-child(5n) hoặc .CommentSection .comment:nth-child(5n)

Answer 2

Hãy thử điều này:

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

này sẽ chọn mỗi thứ 5 DIV với lớp bình luận đó là một con trực tiếp của CommentSection.

Answer 3

Hãy thử điều này

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

Hoặc cụ thể hơn:

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

này sẽ làm việc tốt cũng như:

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