Create different classes for Beaver builder module

We want to create 3 different classes for the headings in a module called infobox (UABB)
We know how to change all the headings. It works with adding this to the custom CSS:

.fl-builder-content .uabb-module-content .uabb-infobox-title {
color: #ff0000;
}

Now we want to make 3 different classes for the infobox module for different heading colors. This is for 3 different sections in the website:
-red (FF­00­00)
-blue (00­99­FF)
-green (33­CC­33)

We tried several this to get it working to make a class but nothing seems to work:

.fl-builder-content h3.red {
color: #ff0000;
}
.fl-builder-content .uabb-module-content .uabb-infobox h3.red {
color: #ff0000;
}
.fl-builder-content .uabb-module-content .uabb-infobox .red h3 {
color: #ff0000;
}
.fl-builder-content .uabb-module-content .uabb-infobox-title .red {
color: #ff0000;
}

Do you know how what the right CSS code is to target the module with a custom class?
Thank you!

Any idea how to create 3 different classes for the headings in a module all over the website?

Hi, the class set on the module in the Advanced tab is probably set on a parent in the DOM, not the itself, so h3.red won’t work

You’ll have to inspect the page source to find where the custom class is set in the elements hierarchy and position it at the proper place in the CSS selector

Could be something like:
.fl-builder-content .red .uabb-module-content .uabb-infobox-title

With a custom class named red on the UABB Info Box module (Advanced tab), can you try this custom CSS?

    body .red h3.uabb-infobox-title {
        color: #ff0000;
    }