# Apply custom CSS class to elements?

**URL:** <https://forum.bubble.io/t/apply-custom-css-class-to-elements/50021>\
**Category:** Need help\
**Created:** [February 19, 2019, 10:50pm UTC](https://forum.bubble.io/t/apply-custom-css-class-to-elements/50021 "2019-02-19T22:50:30Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![julienallard1](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@julienallard1](https://forum.bubble.io/u/julienallard1)\
**Post date:** [February 20, 2019, 2:32am UTC](https://forum.bubble.io/t/apply-custom-css-class-to-elements/50021/3 "2019-02-20T02:32:10Z")

</div>

Just for the sake of sharing solutions, I did found a workaround but that takes too many steps. So in the end, I prefer to enter unique IDs for every groups.

**How to add custom classes to groups:**  
Say I have GROUP-A to which I want to add class **myClass**. Inside the group I’ll create a HTML element into which I put the code:

> `<i class="_myClass"></i>`

Then, in a workflow, using the **Toolbox plugin** , I set the action **Run Javascript** on **Page load**. The javascript code:

> $(‘i.\_myClass’).parents(‘div.Group:first’).addClass(‘myClass’);

For starters, this jQuery command searches through the page for every _element with class **\_myClass**. For every occurence, the code climbs up the **parents of** till it finds a **div with class Group** and gives it the class **myClass**._

 

Now if I have 100 groups that I want to have the class **myClass** , I simply have to copy/paste the HTML element in the first step into every group.

One big downside of using javascript (jQuery) to add classes is that it affects only loaded elements at the moment of the script execution. So hidden groups won’t be parsed.

Voilà…

---

_[View the full topic](https://forum.bubble.io/t/apply-custom-css-class-to-elements/50021)._