# Using CSS to hide specific elements based on user role

**URL:** <https://meta.discourse.org/t/using-css-to-hide-specific-elements-based-on-user-role/248121>\
**Category:** Product Support\
**Created:** [December 7, 2022, 9:17am UTC](https://meta.discourse.org/t/using-css-to-hide-specific-elements-based-on-user-role/248121 "2022-12-07T09:17:01Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![UnitedFreedom](https://avatars.discourse-cdn.com/v4/letter/u/ac91a4/32.png) [@UnitedFreedom](https://meta.discourse.org/u/UnitedFreedom)\
**Post date:** [December 7, 2022, 9:17am UTC](https://meta.discourse.org/t/using-css-to-hide-specific-elements-based-on-user-role/248121/1 "2022-12-07T09:17:02Z")

</div>

Hey there!

I am new to being a discourse admin, and just discovered that moderators have almost the same access as administrators. In addition, there is a lack of control as to what access/abilities moderators have.

**My main concerns are that Moderators can…**  
A) Access Private Messages of any user.  
B) Access the reports area.  
C) Other areas of concern I have yet to find!

So I began to search for a solution, and gave up after reading the post from a co-founder that states…

> [@Changings permissions for moderator](https://meta.discourse.org/t/changings-permissions-for-moderator/30029/2):
>
> No, we have no plans to support fine-grained permissions models, either you are a moderator, or admin and get the standard permissions for those roles. We do plan to add category level moderators though.

…so it appears I have to take the matters into my own hands to somehow limit a moderators access.

* * *

**Here are some solutions I can think of…**  
_Please feel free to correct me or share something better._

A) Discontinue the moderator option, and instead create a new user group/trust level based on a more conservative level of access.

B) Add some JavaScript to disable the reports tab and prevent moderators from accessing private messages.

C) Add some target based CSS to hide the areas I don’t want moderators to see.

* * *

### Using CSS Targeting to hide the reports tab in the Admin Dashboard.

Due to my lack of know-how, I have resorted to the less preferred option of using CSS to hide specific areas. I found success with hiding the Reports tab for all mods & admins using…

```plaintext
li.navigation-item .reports {
   display: none !important;
}

```

But I need it to only target moderators. So I tried modifying the code from [HERE](https://meta.discourse.org/t/make-staff-users-more-recognizable-with-customized-avatars-posts-and-mentions/142794) which specifies how to target specifically moderators using CSS and change their username color. So I tweaked it below, but am unable to get it to work.

```plaintext
li.navigation-item {
  &.moderator {
    .reports {
      display: none !important;
    }
  }

  &.admin {
    .reports {
      display: inline;
    }
  }
}

```

Is anyone able to help show me what I am doing wrong with the CSS targeting, or provide me with a better solution to this problem?

Thanks so much.

---

_[View the full topic](https://meta.discourse.org/t/using-css-to-hide-specific-elements-based-on-user-role/248121)._