Class being overwritten

[macca_andy]

Hi, I’m using pro’s preset tool and I’m trying to add a custom class to a headline. However, it looks as though the class is being overwritten by the other classes. Do you know why?

Have a look at the h1 on this page.

Http://Dragonhockey.co.uk/home2

[macca_andy]

By the way, the custom class is .h1dragon

[basanta]

Hi @macca_andy,

Thanks for writing in!

As you mention you are applying preset. If a preset having a class then it would overwrite the existing class of the element.
You can do one thing apply the preset first then add the custom class. That will keep your custom class.

Hope this helps!

[macca_andy]

Hi,

This doesn’t appear to be working i’m afraid. The custom class is always being overwritten. what do you need in order to look at this?

[macca_andy]

This is my class being overwritten.

[friech]

Hi Andy,

Your selector which consists of only one class is not specific enough to overwrite the default styling of the headline. Please re-write your selector to be more specific.

e.g.

.x-text.dragon-h4 .x-text-content-text-primary {
 /*CSS Rules here*/
}

CSS Specificity: Things You Should Know

Hope it helps,
Cheers!