# A little help with a CSS selector?
**URL:** https://meta.discourse.org/t/a-little-help-with-a-css-selector/356153
**Category:** Support
**Created:** [March 6, 2025, 8:37pm UTC](https://meta.discourse.org/t/a-little-help-with-a-css-selector/356153 "2025-03-06T20:37:27Z")
**Posts on this page:** 19
**Page:** 1
### Author:  [@Turtle](https://meta.discourse.org/u/Turtle)
#### Post date: [March 6, 2025, 8:37pm UTC](https://meta.discourse.org/t/a-little-help-with-a-css-selector/356153/1 "2025-03-06T20:37:27Z")
Hey,
Since there’s no shield icon or any indication of being a staff user for messages in chat, I wanted to slightly color their usernames. I found the selector but I ran into trouble figuring out a way to select staff users. Here’s what I have right now:
```plaintext
.chat-message-info __username__ name {
color: #c3e7eb;
}
```
Is there any way to make this work, and if so, how? Thanks!
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [March 6, 2025, 9:02pm UTC](https://meta.discourse.org/t/a-little-help-with-a-css-selector/356153/3 "2025-03-06T21:02:05Z")
You can use:
```css
.chat-message-info__username.is-staff {
.chat-message-info __username__ name {
color: #c3e7eb;
}
}
```
---
### Author:  [@Turtle](https://meta.discourse.org/u/Turtle)
#### Post date: [March 6, 2025, 9:26pm UTC](https://meta.discourse.org/t/a-little-help-with-a-css-selector/356153/4 "2025-03-06T21:26:05Z")
Thank you! Well, can’t believe I missed that.
---
### Author:  [@Turtle](https://meta.discourse.org/u/Turtle)
#### Post date: [March 7, 2025, 8:19pm UTC](https://meta.discourse.org/t/a-little-help-with-a-css-selector/356153/5 "2025-03-07T20:19:02Z")
Oh, one more question. What would the thing be for trust level four users?
To clarify, I also would like to do something similar for users with trust level four. I couldn’t find a selector for it.
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [March 8, 2025, 8:15pm UTC](https://meta.discourse.org/t/a-little-help-with-a-css-selector/356153/6 "2025-03-08T20:15:08Z")
From what I see in the code, you can expect to see the following classnames:
- `is-staff`
- `is-admin`
- `is-moderator`
- `is-new-user`
- `group--primary_group_name`
You could create a group and set it as the primary group.
You can also use some code to add the missing class names.
```js
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
// Add the groups you wants to add
const allowedGroups = ["trust_level_4"];
api.modifyClass("components:chat/message/info", () => {
return class extends SuperClass {
@service currentUser;
get usernameClasses() {
if (!this.currentUser) {
return super.usernameClasses;
}
const allowedGroupClasses = this.currentUser.groups
.filter((g) => allowedGroups.includes(g.name))
.map((g) => `group--${g.name}`)
.join(" ");
return super.usernameClasses + " " + allowedGroupClasses;
}
}
})
});
```
Then you can CSS target with `.group--trust_level_4`.
Example:
```css
.chat-message-info__username.group--trust_level_4 {
.chat-message-info __username__ name {
color: blue;
}
}
```
For username, you don’t need the code above:
```css
.chat-message-info__username.[data-user-card="username_here"] {
.chat-message-info __username__ name {
color: red;
}
}
```
---
### Author:  [@Turtle](https://meta.discourse.org/u/Turtle)
#### Post date: [March 8, 2025, 8:22pm UTC](https://meta.discourse.org/t/a-little-help-with-a-css-selector/356153/7 "2025-03-08T20:22:25Z")
> [@Arkshine](#):
>
> `group--trust_level_4`
Can I select a specific username instead of trust level four? Thanks so much by the way, this is a very well written response.
Sorry for the questions, I’m not great with code.
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [March 8, 2025, 8:35pm UTC](https://meta.discourse.org/t/a-little-help-with-a-css-selector/356153/8 "2025-03-08T20:35:25Z")
I’ve updated the code above.
It will include the username with `.user--username`.
Note that you can use the ID if you prefer.
---
### Author:  [@Turtle](https://meta.discourse.org/u/Turtle)
#### Post date: [March 8, 2025, 8:40pm UTC](https://meta.discourse.org/t/a-little-help-with-a-css-selector/356153/9 "2025-03-08T20:40:59Z")
Can you give an example of it with my username for example changing color?
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [March 8, 2025, 8:46pm UTC](https://meta.discourse.org/t/a-little-help-with-a-css-selector/356153/10 "2025-03-08T20:46:06Z")
```css
.chat-message-info__username.user--arkshine {
.chat-message-info __username__ name {
color: red;
}
}
```
---
### Author:  [@Turtle](https://meta.discourse.org/u/Turtle)
#### Post date: [March 8, 2025, 8:48pm UTC](https://meta.discourse.org/t/a-little-help-with-a-css-selector/356153/11 "2025-03-08T20:48:30Z")
> [@Arkshine](#):
>
> ```plaintext
> .chat-message-info__username.user--arkshine {
> .chat-message-info __username__ name {
> color: red;
> }
> }
>
> ```
Hm, it won’t work for a user called Kat\_Mac?
```plaintext
.chat-message-info__username.user--kat_mac {
.chat-message-info __username__ name {
color: red;
}
}
```
I have the updated JS.
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [March 8, 2025, 8:52pm UTC](https://meta.discourse.org/t/a-little-help-with-a-css-selector/356153/12 "2025-03-08T20:52:05Z")
If the username is “Kat\_Mac”, then the CSS should be `user--Kat_Mac`.
---
### Author:  [@Turtle](https://meta.discourse.org/u/Turtle)
#### Post date: [March 8, 2025, 8:55pm UTC](https://meta.discourse.org/t/a-little-help-with-a-css-selector/356153/13 "2025-03-08T20:55:59Z")
Hm, I still cannot get it to work. All I have to include in the JS part is the username Kat\_Mac, correct?
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [March 8, 2025, 9:00pm UTC](https://meta.discourse.org/t/a-little-help-with-a-css-selector/356153/14 "2025-03-08T21:00:36Z")
No, don’t change the JS. If you refer to `includeUsersField,` it means whether you want to show by “username” (e.g. Kat\_Mac) or by “id” (e.g. like 4). If you wish to show the username, leave it as it is.
---
### Author:  [@Turtle](https://meta.discourse.org/u/Turtle)
#### Post date: [March 8, 2025, 9:02pm UTC](https://meta.discourse.org/t/a-little-help-with-a-css-selector/356153/15 "2025-03-08T21:02:33Z")
Either way, it still won’t work. Thanks for your help though.
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [March 8, 2025, 9:03pm UTC](https://meta.discourse.org/t/a-little-help-with-a-css-selector/356153/16 "2025-03-08T21:03:58Z")
It does work for me:
Make sure you’re using the latest JS code, and you did update properly the CSS!
* * *
@Turtle Ignore my code, actually I did not see there an attribute with the username you can use.
```css
.chat-message-info__username[data-user-card="Kat_Mac"] {
.chat-message-info __username__ name {
color: red;
}
}
```
---
### Author:  [@Turtle](https://meta.discourse.org/u/Turtle)
#### Post date: [March 8, 2025, 9:06pm UTC](https://meta.discourse.org/t/a-little-help-with-a-css-selector/356153/17 "2025-03-08T21:06:51Z")
This is all I’ve got.
I don’t know what could be the problem.
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [March 8, 2025, 9:07pm UTC](https://meta.discourse.org/t/a-little-help-with-a-css-selector/356153/18 "2025-03-08T21:07:41Z")
Use this CSS:
```css
.chat-message-info__username[data-user-card="Kat_Mac"] {
.chat-message-info __username__ name {
color: red;
}
}
```
---
### Author:  [@Turtle](https://meta.discourse.org/u/Turtle)
#### Post date: [March 8, 2025, 9:08pm UTC](https://meta.discourse.org/t/a-little-help-with-a-css-selector/356153/19 "2025-03-08T21:08:27Z")
> [@Arkshine](#):
>
> ```plaintext
> .chat-message-info__username[data-user-card="Kat_Mac"] {
> .chat-message-info __username__ name {
> color: red;
> }
> }
>
> ```
That worked, thanks!
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [April 7, 2025, 9:08pm UTC](https://meta.discourse.org/t/a-little-help-with-a-css-selector/356153/20 "2025-04-07T21:08:28Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.