Question

I’m doing frontend design and working with a couple of backend programmers right now–a process that is new to me.

We are trying to set up a system for comments complete with a hierarchy for replies. I thought the easiest way to style the different levels would be using nth child and nested lists, but I can’t quite wrap my head around how to do that. Ideas?

Answer 1

As Ian has said, nth-child only works at one level at a time. If you wish to understand nth-child better, here are a few resources:

• http://reference.sitepoint.com/css/pseudoclass-nthchild
• http://css-tricks.com/how-nth-child-works/
• http://www.impressivewebs.com/css3-pseudo-class-expressions/
• http://lea.verou.me/demos/nth.html – this one is great, because it’s
  interactive

In any case, here is something you might want to consider: one thing that can be annoying in the case of hierarchical comments is the fact that, from a certain level, they can get so narrow it looks bad and it even makes reading a bit more difficult. This is why I favour limiting the number of levels – disqus, which was mentioned above, offers the option of limiting the number of nesting levels.

If you have a limited number of levels, let’s say three or five, you can add classes for each level (top-level, second-level, third-level) and style them differently. Another option that you have, and this one does not depend on limiting the number of levels is to style odd and even levels differently by adding some odd-level/ even-level classes when you generate the HTML.

Basically, you would have something like this:

<ul class="comments">
    <li class="comment first-level">
        <div class="comment-data">[date, time, comment author, link]</div>
        <div class="comment-body">[whatever is said in the comment]</div>
        <div class="comment-footer">[reply option, show/hide comment thread option]</div>
        <ul class="comment-thread">
            <li class="comment second-level">
                <div class="comment-data">[date, time, comment author, link]</div>
                <div class="comment-body">[whatever is said in the comment]</div>
                <div class="comment-footer">[reply option, show/hide comment thread option]</div>
                <ul class="comment-thread">
                    [... and so on...]
                </ul>
            </li>
        </ul>
    </li>
</ul>

If I think better, you can add classes like level-1, level-2,… no matter how many levels you have.