3

I'm trying to make a comment system where nested comments have zebra background colors. (Blue bg replies to white bg replies to blue bg...)

Instead of referring to these as .comment, .comment .comment .comment, .comment .comment .comment, .comment, .comment ......, is there a way to refer to these nested children?

***I only have access to the stylesheet, so html, php, and javascript are out of the question.

PearSquirrel
  • 595
  • 2
  • 7
  • 17
  • 1
    You can't just apply "even" and "odd" classes appropriately when you are generating the comment tree? I think that is the standard approach here. – aroth Dec 14 '11 at 04:34
  • Can you provide some example HTML for a comment thread? – Wesley Murch Dec 14 '11 at 04:35
  • Long story short, it's no my website, so I can only change the styles of it. Each comment has a class named 'comment', so making it generate odds and evens isn't an option. – PearSquirrel Dec 14 '11 at 04:38

3 Answers3

0

You could add an alternating class to accompany .comment that's applied procedurally as the comments are being laid out on the page (e.g: .row1, .row2, etc.) and then style those classes accordingly with CSS.

Aaron
  • 5,137
  • 1
  • 18
  • 20
  • Problem is that I can only change the stylesheet. – PearSquirrel Dec 14 '11 at 04:38
  • @PearSquirrel Well, that's certainly a limiting factor. For modern browsers, you can try the **:nth-child** pseudo-class: http://www.w3.org/TR/selectors/#nth-child-pseudo – Aaron Dec 14 '11 at 04:44
0

Look for nth-child in the CSS reference, selectors section. It's used something like this:

tr:nth-child(even) {
   background: #cccccc;
}
tr:nth-child(odd) {
   background: white;
}

you don't have to apply different classes to alternating rows; CSS itself will distinguish even rows from odd rows.

smendola
  • 2,273
  • 1
  • 15
  • 14
  • So what exactly is this saying? I believe nth-child only refers to one parent element, but I could be wrong. Would this mean a ul with three li's would have the first white, next another, third white? What I need is all of them to be white, but if someone replies to those, their comment is a different color - blue for example. The comment structure would go: WHITE parent > BLUE child > WHITE child child > BLUE child child child >WHITE child child child child... – PearSquirrel Dec 14 '11 at 04:46
  • I can't wait 'til CSS3 has better support... Selectors like this make it astoundingly formidable. – Aaron Dec 14 '11 at 04:48
  • Sorry, I think I had misunderstood; so there is no strict alternation, one post, one reply? Can you post a sample snippet of the structure? – smendola Dec 14 '11 at 04:50
  • @PearSquirrel `tr:nth-child(odd) styles every tr element that is an odd-numbered child of its parent. – Aaron Dec 14 '11 at 04:51
  • Or, let me ask the question this way: structurally, what is different between a comment and a reply? is one more indented? or anything structural that CSS can key off of? Like, level 1 is always comment, level 2 is always reply? – smendola Dec 14 '11 at 04:54
  • Basically they're all part of the 'comment' class. comment .child has a margin on the top and the left, indenting it a few pixels. There's no such thing as a background-alternate property, so I can't say something like comment.child {background: white or blue but not parent's color. – PearSquirrel Dec 14 '11 at 05:00
  • @PearSquirrel It appears that the CSS selector closest to the one you're looking for is the **attribute selector**, and this would require an inline HTML `style` attribute that contained a `background-color` property. Unfortunately, it doesn't look like there are any purely-CSS options available in your situation. Out of curiosity, how do you have access to the CSS, but nothing else? Perhaps there's an 'outside-the-box' solution to this problem. – Aaron Dec 14 '11 at 05:44
-1

I have a system where I wanted the Zebra effect on all the Rows in a table, i used the following jQuery. Maby the selector will apply for you as well.

$('#celebs tbody tr:even').css('background-color','#dddddd');

Hope this helps

Captain0
  • 2,583
  • 2
  • 28
  • 44
  • unfortunately, this simply styles every other table row, ignoring the pattern of 'nested' comments entirely. – Aaron Dec 14 '11 at 04:38