NodeBB: Coloring element by group?

[Arc]

Hey.

On my forum, we have Halos around the avatars, set with:

.poster-avatar{
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: -webkit-box-shadow 0.3s ease;
    transition: box-shadow 0.3s ease;
    -webkit-box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.06);
    box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.06);
}
.poster-avatar:hover{
    -webkit-box-shadow: 0px 0px 0px 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 0px 6px rgba(0, 0, 0, 0.1);
}

Now, I was hoping to dynamically color these Halos for staff groups, so I found this topic:
https://community.nodebb.org/topic/3185/name-color-for-groups-or-username/6

With this nice block of CSS:

a[href*="groups/administrators"] span.label {
background-color: red !important;;
padding: 2rem;
}

So I figured, "Hey, thats awesome. Then I should be able to use CSS selectors to color the Halos.

However, after- extensive testing, I cant figure out what

a[href*="groups/administrators"]

is trying to select, or get it to work, at all.

I thought maybe

a[href*="groups/coloradorks-staff"] .poster-avatar{
box-shadow: 0 0 0 6px rgb(255, 0, 0);
}

would work- but obviously .poster-avatar isn't a child of this selector. Is this just selecting links to the groups page? If so, how does it work in the original case?

[Arc]

After some more research, I found a solution:

.topic [data-username="USERNAME"] .poster-avatar

Will select just one user's avatar