Topic: CSS Specificity in GenerateBlocks 2.0

rabbottweb
April 9, 2025 at 3:32 am

I’m working on a client’s website that I did not build. I’ve done previous updates using GenerateBlocks v1 with no issues. However, it GenerateBlocks v2 has changed enough that I using styles in the editor doesn’t always work.

Example: in GBv1 an h2 element looks like h2.gb-headline-505f7d00. But in GBv2 that h2 has been dropped so the style is only gb-headline-505f7d00 allowing other styles to take precedence.

In a nutshell: GBv1 worked great on this website and GBv2 does not.

Is there anyway to fix this by increasing the specificity of the GBv2 elements?
Ying
April 9, 2025 at 9:54 am

Hi there,

Unfortunately, there isn’t a way to do what you asked for.

Can I see an example of the issue?
rabbottweb
April 9, 2025 at 11:22 am
I can’t override this style on an Elementor site because Elementor prefixes the h2 tag with the .elementor-kit-6 class. Example below.
```
.elementor-kit-6 h2 {
	color: var( --e-global-color-secondary );
	font-family: "Source Sans Pro", Sans-serif;
	font-size: 26px;
	font-weight: 600;
}
```
In GBv1 it added something like this for a class when adding an h2 headline:

h2.gb-headline-505f7d00

But in GBv2 an h2 headline only produces the class name without the tag name. Example:

.gb-headline-505f7d00

Everything that I built using GBv1 works fine still. Unfortunately, I changed the settings in the plugin to use version 2 block and I can’t roll it back.
Ying
April 9, 2025 at 3:09 pm

You can wrap a container outside the headline, and create a new selector h2.gb-text to override the Elementor CSS, the new selector would be .gb-element-xxxxxxxxx h2.gb-text.

Here’s an example:https://app.screencast.com/Ek6mQRkyc9YlL

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

CSS Specificity in GenerateBlocks 2.0