How to add a class to category tr to optionally apply CSS

Development

AI-generated summary

The discussion revolves around adding a class to a category <tr> to apply CSS selectively. pfaffman initially considered adding a “can-rate” class in the initializer or Glimmer component but struggled with identifying the target categories. Alteras suggested targeting the data-category-id attribute or adding a class to a child element and using CSS to style the parent <tr>. pfaffman found the solution in adding an attribute to a child element and using CSS with tr:has(> .some-class), as seen in the Category Icons theme component. This solution was successful.

1

I’m adding some stuff to the in the topic list. I need to apply CSS only to the categories that I’m supposed to be affecting.

I think I need to do that by adding a “can-rate” class to the <tr> of I the categories that I want to affect.

I think I can do it in my glimmer component (which might know if it should apply the change?), though I’d be just as happy to do it in the initializer.

I’ve tried some things that didn’t work. Can someone throw me a bone or point me to an example? Like https://github.com/discourse/discourse-groups-css-classes-in-body/blob/main/common/header.html seems like the right track, but I don’t know how to find out in the initializer if the category is one that I want to change (so I guess the initializer is the wrong place?)

Maybe Override class list

2

It might be easier to just target the data-category-id attribute instead of trying to add a class to the <tr>.

If you need to add styles to the tr without the data-category-id, you might have some luck looking into how the Category Icons theme component changes the category links render (which affects everywhere). Something along the lines of adding the class/attribute to a child element and letting the style come up with some CSS (i.e. tr:has(> .some-class)).

3

Aha! That’s the magic I needed. And so simple. I almost even understood it. I can’t thank you enough.