# Different theme or CSS for different categories
**URL:** https://meta.discourse.org/t/different-theme-or-css-for-different-categories/84911
**Category:** UX
**Created:** [April 9, 2018, 7:04pm UTC](https://meta.discourse.org/t/different-theme-or-css-for-different-categories/84911 "2018-04-09T19:04:40Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@Kanana](https://meta.discourse.org/u/Kanana)
#### Post date: [April 9, 2018, 7:04pm UTC](https://meta.discourse.org/t/different-theme-or-css-for-different-categories/84911/1 "2018-04-09T19:04:40Z")
Hi,
I’m wondering if it’s possible to display a different theme for each category I have in the forum? I didn’t find answer in the forum.
I noticed that in the body tag the category name is displayed, but, when you go in a subcategory, the subcategory name is added their. So if you have 10 subcategory you need to put the 10 in the css and it’s not great. If the moderator adds a subcategory, you need to add it also in the css.
I also noticed that when you go to an article in the subcategory, the url looses the category name so there is nothing to help.
Any suggestion/idea would be appreciated 😉
---
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [April 9, 2018, 7:08pm UTC](https://meta.discourse.org/t/different-theme-or-css-for-different-categories/84911/2 "2018-04-09T19:08:05Z")
> [@Kanana](#):
>
> I also noticed that when you go to an article in the subcategory, the url looses the category name so there is nothing to help.
No, it doesn’t. I can see the category class applied to body in this topic just fine:
```plaintext
```
---
### Author:  [@Kanana](https://meta.discourse.org/u/Kanana)
#### Post date: [April 9, 2018, 7:16pm UTC](https://meta.discourse.org/t/different-theme-or-css-for-different-categories/84911/3 "2018-04-09T19:16:06Z")
I agree it stays on the body class, but the category name is not in the URL.
Let’s say my website is [www.example.com/category/subcategory](http://www.example.com/category/subcategory), if I click on a subcategory topic the URL becomes [www.example.com/mytopic](http://www.example.com/mytopic)
The idea behind would have been to use (with JS I presume) the category URL with the CSS.
I can’t believe there is not a simple way to do that.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [April 9, 2018, 7:18pm UTC](https://meta.discourse.org/t/different-theme-or-css-for-different-categories/84911/4 "2018-04-09T19:18:38Z")
Is there any reason you can’t look for the class name in the body tag instead of the URL?
It might help more if you explain specifically what you’re trying to do.
---
### Author:  [@Kanana](https://meta.discourse.org/u/Kanana)
#### Post date: [April 9, 2018, 7:23pm UTC](https://meta.discourse.org/t/different-theme-or-css-for-different-categories/84911/5 "2018-04-09T19:23:39Z")
The tag in the body changes all the time, that’s the problem. the category tag is “category-mycategory” and the subcategory tag is “category-mycategory-mysubcategory”. If it would have been “category-mycategory mysubcategory” there won’t have a problem.
I have a forum that will support different games and I’d like that each game has its own theme/css. One game will be a category + subcategories.
---
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [April 9, 2018, 7:27pm UTC](https://meta.discourse.org/t/different-theme-or-css-for-different-categories/84911/6 "2018-04-09T19:27:44Z")
I think something like
```css
[class^='category-mycategory'] {
background-color: pink;
}
```
should work.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [April 9, 2018, 7:28pm UTC](https://meta.discourse.org/t/different-theme-or-css-for-different-categories/84911/7 "2018-04-09T19:28:40Z")
Right, the above CSS selector will select any class that starts with `category-mycategory`, which includes `category-mycategory-subcategory`
You can see more options here:
> **[Attribute selectors - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Attribute_selectors)**
>
> The CSS attribute selector matches elements based on the element having a given attribute explicitly set, with options for defining an attribute value or substring value match.
---
### Author:  [@Kanana](https://meta.discourse.org/u/Kanana)
#### Post date: [April 9, 2018, 7:36pm UTC](https://meta.discourse.org/t/different-theme-or-css-for-different-categories/84911/8 "2018-04-09T19:36:01Z")
Thank you so much! It works!
I didn’t know that selector, I haven’t had to use it before. This is great.
You made my day.