# How can I add a custom class to every 2nd message?
**URL:** https://meta.discourse.org/t/how-can-i-add-a-custom-class-to-every-2nd-message/49990
**Category:** Support
**Created:** [11 Septiembre, 2016 19:37 UTC](https://meta.discourse.org/t/how-can-i-add-a-custom-class-to-every-2nd-message/49990 "2016-09-11T19:37:43Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@ziptofaf](https://meta.discourse.org/u/ziptofaf)
#### Post date: [11 Septiembre, 2016 19:37 UTC](https://meta.discourse.org/t/how-can-i-add-a-custom-class-to-every-2nd-message/49990/1 "2016-09-11T19:37:43Z")
Okey, there’s a huge chance I am just very stupid and can’t see the obvious but I am wondering on how to write a plugin/extension that will simply add one extra class to every 2nd .topic-body. Reason for why I need it is to add a different background color for them (and doing it via sheer CSS is pretty hard considering they are all in separate rows etc). So I can get to this result:
Right now I am using a timer based approach [that I’ve seen here](https://meta.discourse.org/t/catch-content-loaded-event-via-js/26323/3?) but it’s actually not firing every time, once in a while it fails to do so after loading next batch of posts. Which annoys me a lot.
So I’ve come to a conclusion that I need to either understand when exactly does Discourse loads new messages (aka which event causes it) or that it should be done server-side, at the render time. However I am at a loss on how to implement it, it seems I am really lacking experience with AJAX heavy development. Any advice or at least a link to some resources that could help me here would be awesome
---
### Author:  [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [11 Septiembre, 2016 19:48 UTC](https://meta.discourse.org/t/how-can-i-add-a-custom-class-to-every-2nd-message/49990/2 "2016-09-11T19:48:58Z")
Hi ziptofaf welcome to the forum
I’m not convinced that any class attributes need to be inserted into the DOM and I think there is a good chance that satisfactory results can be obtained purely by using the correct CSS selectors.
For example, this “works” somewhat except “small action” posts may make it a bit off from what you’re wanting.
```plaintext
div.post-stream > div:nth-child(odd) {
background-color: #bde;
}
```
---
### Author:  [@ziptofaf](https://meta.discourse.org/u/ziptofaf)
#### Post date: [11 Septiembre, 2016 19:55 UTC](https://meta.discourse.org/t/how-can-i-add-a-custom-class-to-every-2nd-message/49990/3 "2016-09-11T19:55:12Z")
Sadly it’s just as you said - small action posts will take it long way from what I am trying to accomplish.
As the different color will spread way too much to the right and it looks poorly, I’ve tried that before and my users instantly disliked it. So as much as it looks like an overkill I don’t see a way to do it via sheer CSS yet properly.
---
### Author:  [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [11 Septiembre, 2016 20:30 UTC](https://meta.discourse.org/t/how-can-i-add-a-custom-class-to-every-2nd-message/49990/4 "2016-09-11T20:30:49Z")
> [@ziptofaf](#):
>
> As the different color will spread way too much to the right and it looks poorly
That’s just basic CSS and a result of not targeting the correct element.
“small action” posts can be excluded from the styling easily enough by specifying the class value “topic-post”, but the odd-even uses the element regardless of the class attribute ☹
```plaintext
div.post-stream > div.topic-post:nth-child(2n) div.topic-body {
background-color: #bde;
}
div.post-stream > div.topic-post:nth-child(2n+1) div.topic-body {
background-color: #edb;
}
```
---
### Author:  [@ziptofaf](https://meta.discourse.org/u/ziptofaf)
#### Post date: [11 Septiembre, 2016 20:37 UTC](https://meta.discourse.org/t/how-can-i-add-a-custom-class-to-every-2nd-message/49990/5 "2016-09-11T20:37:40Z")
Oh my!
Thanks 😛
That’s what I get for working too much in back-end instead of front-end, I forgot about such simple things!
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [5 Marzo, 2019 02:56 UTC](https://meta.discourse.org/t/how-can-i-add-a-custom-class-to-every-2nd-message/49990/6 "2019-03-05T02:56:16Z")
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [5 Marzo, 2019 03:44 UTC](https://meta.discourse.org/t/how-can-i-add-a-custom-class-to-every-2nd-message/49990/7 "2019-03-05T03:44:49Z")