# CSS classes for tags

**URL:** https://meta.discourse.org/t/css-classes-for-tags/58161
**Category:** Support
**Created:** [March 1, 2017, 11:46am UTC](https://meta.discourse.org/t/css-classes-for-tags/58161 "2017-03-01T11:46:58Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![CamilleRoux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/camilleroux/32/119575_2.png) [@CamilleRoux](https://meta.discourse.org/u/CamilleRoux)
#### Post date: [March 1, 2017, 11:46am UTC](https://meta.discourse.org/t/css-classes-for-tags/58161/1 "2017-03-01T11:46:58Z")

</div>

Hi,

Is there CSS classes for tags in the HTML?  
I’d like to add CSS style to topics with a specific tag.

Thanks

---

<div class="post-metadata">

### Author: ![jomaxro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jomaxro/32/126216_2.png) [@jomaxro](https://meta.discourse.org/u/jomaxro)
#### Post date: [March 1, 2017, 2:14pm UTC](https://meta.discourse.org/t/css-classes-for-tags/58161/2 "2017-03-01T14:14:35Z")

</div>

You can absolutely apply CSS to a single tag. I recently did the same looking to capitalize a letter in a tag.

> [@Capitalize a tag in the UI](https://meta.discourse.org/t/capitalize-a-tag-in-the-ui/57756):
>
> The company I currently work for capitalizes its name in a unique way (capital in the middle). On our Discourse site, we have a tag that we’d like to use the same capitalization. I understand Discourse lowercases all tags in the back-end, which is perfectly fine. I’m hoping to use JS or CSS to change the tag in the UI. Is the following safe? Will it get all instances of a tag? Is there a better way to accomplish this? .tag-tag\_name\_here { visibility: hidden; position: relative; }…

In short, you can handle most cases with the following (replace `tag_name_here` with the tag you wish to style):

```plaintext
.tag-tag_name_here {
    // Declarations go here
}

```

Depending on the exact style you want, you may need more rules to handle all cases. You can see the final set of rules we came up with for my issue [here](https://meta.discourse.org/t/capitalize-a-tag-in-the-ui/57756/11).

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [March 1, 2017, 2:20pm UTC](https://meta.discourse.org/t/css-classes-for-tags/58161/3 "2017-03-01T14:20:19Z")

</div>

Yeah, I was wondering if that would be helpful too, but I think this person wants to decorate other topic elements based on the existence of a tag, and that will be a tad more difficult, if not impossible to do in CSS alone.

There are a couple of things that could be done in Core to make this easier, such as, applying the tag classes to the topic entity itself on the topic listing and the actual topic.

Beyond that, I believe JavaScript would have to be used to read the tag class inside an entity and then apply a new class to its parent. But thoes are my thoughts on it as of right now.

---

<div class="post-metadata">

### Author: ![jomaxro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jomaxro/32/126216_2.png) [@jomaxro](https://meta.discourse.org/u/jomaxro)
#### Post date: [March 1, 2017, 2:21pm UTC](https://meta.discourse.org/t/css-classes-for-tags/58161/4 "2017-03-01T14:21:34Z")

</div>

> [@cpradio](#):
>
> but I think this person wants to decorate other topic elements based on the existence of a tag

Totally misread that, thanks @cpradio. I do agree that if you are correct about the intent, it will be significantly more difficult.

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [March 1, 2017, 4:28pm UTC](https://meta.discourse.org/t/css-classes-for-tags/58161/5 "2017-03-01T16:28:32Z")

</div>

Yes, some type of CSS “parent selector” would be nice. eg.

```plaintext
td.the_val < tr { 
 font-weight: bold; 
} 
<tr> 
<td></td> 
<td class="the_val"></td> 

```

But alas there is no such thing and AFAIK the technical difficulty involved means there never will be.

However, JavaScript `parentNode()` is capable of going up the DOM

I would not want “every element to have every possible class value” like some apps do (_cough_ WordPress) but I think if adding a class value to an ancestor element so that CSS could “drill down” would help there is a good chance it might just happen à la pr welcome

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [May 7, 2019, 10:40pm UTC](https://meta.discourse.org/t/css-classes-for-tags/58161/6 "2019-05-07T22:40:51Z")

</div>



---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [June 6, 2019, 10:53pm UTC](https://meta.discourse.org/t/css-classes-for-tags/58161/7 "2019-06-06T22:53:02Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
