2

I'm writing a CSS theme for a forum with nested comments. I want the top-level comments to have white background, the second-level comments to have grey background, third-level white, fourth-level grey, fifth-level white, etc.

This stylesheet would work for the first five levels:

#comments > .comment { background-color: white }
#comments > .comment > .comment { background-color: grey }
#comments > .comment > .comment > .comment { background-color: white }
#comments > .comment > .comment > .comment > .comment { background-color: grey }
#comments > .comment > .comment > .comment > .comment > .comment { background-color: white }

How can this be written so it will always work regardless of nesting depth?

f.ardelian
  • 6,716
  • 8
  • 36
  • 53
  • 1
    Can you show some representative HTML, and show what the end-result should be? As it is you're asking for us to find a concise selector for something we can't see (which is, effectively, guess-work). – David Thomas Mar 08 '15 at 17:14
  • 3
    Seems pretty self-explanatory, @David. Background colors alternate with each nesting level. – BoltClock Mar 08 '15 at 17:31
  • 2
    @BoltClock: to a point I agree, it's just nice to see the structure as a reference (if nothing else); which facilitates construction of our own demonstrations. Also, sometimes, the structure might define/show an alternative choice for creating the selectors. – David Thomas Mar 08 '15 at 17:33
  • 1
    I'm not really sure why this question is getting downvotes. It's a pretty good question. Though I think the answer is that it's impossible. I wasn't able to find it ever being asked before. – James Montagne Mar 08 '15 at 18:46
  • @James Montagne: This question has definitely been asked before, I remember seeing more than a few guises of it with various phraseology. But you know what - I could never find any of those previous questions either. – BoltClock Mar 09 '15 at 17:39
  • @boltclock Must be one of those things that's hard to describe in english, making it hard to search. This was the first I've seen of it. At first glance it seemed like something that should be doable, but I'm pretty sure it's not. Then I figured it must have been asked before so I wanted to close as duplicate but couldn't find one. All of that being said, I think it's a good question and if I couldn't find a duplicate I certainly can't expect that the OP should have, so I'm unsure why the downvotes (since offset by upvotes). – James Montagne Mar 09 '15 at 17:45
  • @boltclock Gave it one last shot with some alternate phrasing and I think I finally found one. – James Montagne Mar 09 '15 at 17:51
  • @James Montagne: Nice work. And agreed about the downvotes. – BoltClock Mar 09 '15 at 17:52

1 Answers1

2

I think you can't, but you can decrease the amount of code a little bit. First ofa all, make sure to use the child (>), otherwise a comment in a comment in a comment will also be matched by #comment .comment.

Secondly, you can define a base style for comments, and only add specific overrides for the second fourth (and if you needs sixth, etc) level.

This way, you can define the 'override' for as many levels as you can realistically expect. If comments are nested any deeper, they are still styled but with the base style.

/* Base, applies to all comments */
#comments .comment { 
  background-color: white; 
}

/* Overrides for specific levels of nesting */
#comments > .comment > .comment,
#comments > .comment > .comment > .comment > .comment { 
  background-color: grey 
}
GolezTrol
  • 114,394
  • 18
  • 182
  • 210
  • The direct child selector isn't really needed as the later, more specific selectors will override the prior. Though with your updated example of using a base style it does matter. – James Montagne Mar 08 '15 at 17:34
  • Yes, I forgot the >, but I'm not going to write a CSS to support 50 levels "just in case". – f.ardelian Mar 08 '15 at 18:03
  • Well, then don't. I don't think it's realistic to have 50 levels, and even if you have, the 'base' styling might be good enough for the deeper levels. Also note that I separated the selector with commas so to include an extra level, you only need to add that selector to the list, not the entire styling. There is no 'loop' in CSS for this. Maybe there is in SCSS, but I don't think so, and still it won't be endless. – GolezTrol Mar 08 '15 at 18:06