Styling blockquotes with alternating colors

Question

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?

rm-vanda · Answer 1 · 2014-04-02T17:38:18.677

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 */ }

edited Apr 02 '14 at 17:38

answered Apr 02 '14 at 17:33

rm-vanda

3,122
3
23
34

1

Yes, but how does this get the solution OP is looking for? – geoff Apr 02 '14 at 17:34

score 0 · Accepted Answer · edited May 23 '17 at 11:57

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.

edited May 23 '17 at 11:57

Community

1
1

answered Apr 02 '14 at 17:37

geoff

2,251
1
19
34

Interesting. Thanks for the link. I may try the JS solution. – sehummel Apr 02 '14 at 17:44

Styling blockquotes with alternating colors

2 Answers2