0

I need to style nested blockquotes with alternating colors. Here is my markup:

<div class="reply">
  <blockquote class="reply">
     text
     <blockquote class="reply">
        text
          <blockquote class="reply">
             text
          </blockquote>
     </blockquote>
   </blockquote>
</div>

This is my CSS:

.reply blockquote.reply:nth-child(even) {
  background: #d7eff4;
  border: 1px solid #00B9E4;
}

.reply blockquote.reply:nth-child(odd) {
  background: #a7e2ef;
  border: 1px solid #00B9E4;
}

I've tried both nth-of-type and nth-child. nth-of-type doesn't work (in Chrome, at least). `nth-child works for levels 1 and 2 but not level 3. It thinks level 3 is even. How do I get the colors to alternate?

sehummel
  • 5,476
  • 24
  • 90
  • 137

2 Answers2

1

Each blockquote is the only child of its parent. Thus, they are all child number 1. That is your problem.

To achieve the effect you want, you would have to use selectors like this:

div.reply > .reply{ /* style A */ } 
blockquote.reply > .reply {/* style A */ } 
blockquote.reply > .reply > .reply { /* etc */ }

But that will not apply, infinitely - so, you'll have to alter your html so you can instead do something like this:

.reply > .rereply { /* style A */ }

.rereply > .reply { /* style B */ } 
rm-vanda
  • 3,122
  • 3
  • 23
  • 34
0

According to Are alternate nested styles possible in CSS?:

there doesn't appear to be any css selectors for traversing through nesting (except the > selector, which only looks at the direct child of parent).

That being said, this isn't possible for a nesting of blockquotes arbitrarily deep. So the best (and probably only way) to do so is something along the lines of

.reply > blockquote.reply { ... }
.reply > blockquote.reply > blockquote.reply { ... }
.reply > blockquote.reply > blockquote.reply > blockquote.reply { ... }

and so on.

Community
  • 1
  • 1
geoff
  • 2,251
  • 1
  • 19
  • 34