# CSS selector to separate posts by current user

**URL:** https://meta.discourse.org/t/css-selector-to-separate-posts-by-current-user/146267
**Category:** Development
**Created:** [March 31, 2020, 12:54pm UTC](https://meta.discourse.org/t/css-selector-to-separate-posts-by-current-user/146267 "2020-03-31T12:54:34Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![meriksson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/meriksson/32/66712_2.png) [@meriksson](https://meta.discourse.org/u/meriksson)
#### Post date: [March 31, 2020, 12:54pm UTC](https://meta.discourse.org/t/css-selector-to-separate-posts-by-current-user/146267/1 "2020-03-31T12:54:34Z")

</div>

I am looking for a simple way for a CSS selector to match posts made by the current user (but not posts by other users). As far as I can tell, there is no CSS class added to such posts which I can use. But perhaps I am missing something?

If there is no such class at the moment, I would greatly appreciate if one was added!

My suggestion would be to add a class to the `topic-post` element, similar to the currently existing classes relating to the posting user, e.g. `topic-owner`. The new class could be `current-user` or `my-post` or whatever fits with existing Discourse nomenclature.

> **Click here for an explanation of why I want to do this...**
>
> Some time ago users of my forum complained about getting addicted to checking how many likes their posts have received. They went back to posts repeatedly just to check their likes and this behavior reminded them of the more toxic aspects of the mainstream social media platforms.
> 
> My solution was to create a theme for them to use where I simply added a CSS rule to hide the like counter on their posts. The like button on posts created by the current user has a class called `.my-likes`, so it is easy to select with CSS. This worked well and the users were happy with the solution.
> 
> However, earlier today it was pointed out to me that if you click the “…”-button, i.e. “show more” on a post, the users who have liked that post are listed. One user reported that he was back in his “dopamine junkie” ways because of this, repeatedly clicking “…” to circumvent the special theme and check his likes.
> 
> But unlike the above mentioned case of the like button, I can not find a CSS selector which lets me do this. The only solution I have found is to hide the list of likers for all posts, i.e. making it so that the users of the theme can not see that list for any post.
> 
> What I can do now is this:
> 
> `.who-liked { display: none;}`
> 
> What I hoped to do was something like this:
> 
> `.topic-post.current-user .who-liked { display: none;} `
> 
> (But this does not work, because the `.current-user` class does not exist.)

---

<div class="post-metadata">

### Author: ![hellekin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hellekin/32/51636_2.png) [@hellekin](https://meta.discourse.org/u/hellekin)
#### Post date: [March 31, 2020, 1:51pm UTC](https://meta.discourse.org/t/css-selector-to-separate-posts-by-current-user/146267/2 "2020-03-31T13:51:39Z")

</div>

> [@meriksson](#):
>
> But perhaps I am missing something?

Maybe you can use the `data-user-id` attribute in the `.topic-post article` tag?

---

<div class="post-metadata">

### Author: ![zcuric](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zcuric/32/292837_2.png) [@zcuric](https://meta.discourse.org/u/zcuric)
#### Post date: [March 31, 2020, 4:44pm UTC](https://meta.discourse.org/t/css-selector-to-separate-posts-by-current-user/146267/3 "2020-03-31T16:44:39Z")

</div>

One thing you could to is find the topics in topic list which have current user are the poster, that could be done with jQuery. If true, then apply style to that row. Downside could be that user can be found as poster to the OP topic.

Other way is to override topic list component completely and do the magic there. More info on overriding templates can be found here:

> [@Developing Discourse Themes & Theme Components](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648#heading--4-b-2):
>
> Discourse Themes and Theme Components can be used to customize the look, feel and functionality of Discourse’s frontend. This section of the developer guides aims to provide all the reference materials you need to develop simple themes for a single site, right up to complex open-source theme components. This introduction aims to provide a map of all the tools and APIs for theme development. If you prefer a step-by-step tutorial for theme development, jump straight to: Themes vs. Theme Compon…

---

<div class="post-metadata">

### Author: ![zcuric](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zcuric/32/292837_2.png) [@zcuric](https://meta.discourse.org/u/zcuric)
#### Post date: [March 31, 2020, 4:53pm UTC](https://meta.discourse.org/t/css-selector-to-separate-posts-by-current-user/146267/4 "2020-03-31T16:53:57Z")

</div>

Sorry, are you saying to want to decorate user posts in topic list or in the actual topic?  
You could hook to the avatar of the current user in that case and find the parent post root element and add a class with jQuery to it.

---

<div class="post-metadata">

### Author: ![meriksson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/meriksson/32/66712_2.png) [@meriksson](https://meta.discourse.org/u/meriksson)
#### Post date: [March 31, 2020, 5:53pm UTC](https://meta.discourse.org/t/css-selector-to-separate-posts-by-current-user/146267/5 "2020-03-31T17:53:54Z")

</div>

Thank you for the replies!

I am well aware that I can do this with Javascript. I should have mentioned that from the start. However, the point of my post is that I would like to do it in a much simpler way, with a tiny bit of CSS (see the expandable part of my original post).

Besides being a simpler and more natural solution, it would let me manage things with the excellent built-in system for Themes and Theme Components.

And it is not like this would be some weird exotic thing. As I mentioned initially, Discourse already has class attributes on the very same element (post on topic page) for indicating properties of the posting user (topic-owner, trust level, group memberships etc). And in a sub-element of this element (the like button), there is already a class attribute indicating that the post is made by the user who is currently accessing the page.

For these reasons, I think adding that single attribute on the topic-post element is a much better solution than some Javascript hack.

---

<div class="post-metadata">

### Author: ![smrtey](https://avatars.discourse-cdn.com/v4/letter/s/db5fbb/32.png) [@smrtey](https://meta.discourse.org/u/smrtey)
#### Post date: [March 31, 2020, 6:17pm UTC](https://meta.discourse.org/t/css-selector-to-separate-posts-by-current-user/146267/6 "2020-03-31T18:17:08Z")

</div>

> [@meriksson](#):
>
> I am well aware that I can do this with Javascript.

Oh, just came here to post the js solution. I made a group called hidelikes and this js hides the who-liked for all group members for their own posts.

```plaintext
<script type="text/discourse-plugin" version="0.8">
    $( document ).ready(function() {
        let currentUser = api.getCurrentUser();
        var groups = currentUser.groups;
        var userID = currentUser.id;
        const hidelikes = groups.some(g => g.name === 'hidelikes');
        if (hidelikes) { 
               $('<style>').text('.boxed.onscreen-post[data-user-id="' + userID + '"] .who-liked{display: none;}').appendTo(document.head)
         }
    });
</script>

```

Obviously if you want to do it for all users just scrap the groups part

---

<div class="post-metadata">

### Author: ![meriksson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/meriksson/32/66712_2.png) [@meriksson](https://meta.discourse.org/u/meriksson)
#### Post date: [March 31, 2020, 10:40pm UTC](https://meta.discourse.org/t/css-selector-to-separate-posts-by-current-user/146267/7 "2020-03-31T22:40:13Z")

</div>

Thank you very much for posting the actual code, that is helpful indeed!

---

<div class="post-metadata">

### Author: ![zcuric](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zcuric/32/292837_2.png) [@zcuric](https://meta.discourse.org/u/zcuric)
#### Post date: [April 1, 2020, 8:58am UTC](https://meta.discourse.org/t/css-selector-to-separate-posts-by-current-user/146267/8 "2020-04-01T08:58:54Z")

</div>

After digging a bit in plugin-api I think I found solution to your problem and the proper way of doing what you suggested

```plaintext
<script type="text/discourse-plugin" version="0.8">
  api.addPostClassesCallback((attrs) => {
    const user = api.getCurrentUser();
    if (attrs.user_id === user.id) {
      return ['current-user-post']
    }
  });
</script>

```

Check here:  
[https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/lib/plugin-api.js#L712](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/lib/plugin-api.js#L712)

This will add `current-user-post` to every post that is made by a current logged in user.

---

<div class="post-metadata">

### Author: ![meriksson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/meriksson/32/66712_2.png) [@meriksson](https://meta.discourse.org/u/meriksson)
#### Post date: [April 2, 2020, 2:00pm UTC](https://meta.discourse.org/t/css-selector-to-separate-posts-by-current-user/146267/9 "2020-04-02T14:00:59Z")

</div>

This is great—thank you very much!

---

<div class="post-metadata">

### Author: ![envoca](https://avatars.discourse-cdn.com/v4/letter/e/6de8d8/32.png) [@envoca](https://meta.discourse.org/u/envoca)
#### Post date: [April 20, 2021, 8:39pm UTC](https://meta.discourse.org/t/css-selector-to-separate-posts-by-current-user/146267/10 "2021-04-20T20:39:54Z")

</div>

Where to add this code? I added to but not working fine.
