Child Themes require important

[catchlightWeb]

Prerequisites

• I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
• The feature is still missing in the latest stable version of Elementor ( Elementor Pro )

What problem is your feature request going to solve? Please describe.

I'm always frustrated when I create a child theme using the Child Theme Configurator plugin or download the Elementor Child Theme from Github, I always have to add !important to every CSS style to get it to override.

Describe the solution you'd like

There was some documentation on how to get my child theme to override parent styles without needing to do this

Describe alternatives you've considered

I have tried to find ways of pushing the child theme up the enqueue order but haven't been successful.

Additional context

No response

[nicholaszein]

Hello @catchlightWeb,

try using the following snippet:

/**
 * Load child theme css after Elementor frontend
 *
 * @return void
 */
function hello_elementor_child_enqueue_scripts() {
	wp_enqueue_style(
		'hello-elementor-child-style',
		get_stylesheet_directory_uri() . '/style.css',
		[
			'hello-elementor-theme-style', 'elementor-frontend', 'elementor-pro', // remove 'elementor-pro' if you don't use it, otherwise your child theme CSS won't load 
		],
		'1.0.0'
	);
}
add_action( 'wp_enqueue_scripts', 'hello_elementor_child_enqueue_scripts', 1000 );

This will force your child's styles to load only after Elementor, and Elementor Pro frontend styles are loaded.

Keep in mind that if you have the Improved CSS Loading experiment enabled, you might still need to add more specificity to your CSS declarations, since this experiment adds inline CSS for each widget, which will have higher specificity than any external files like your child theme's styles. This is a performance feature. It only adds the necessary CSS for each widget you have on a specific page. If you have more than one instance of a particular widget on the same page, the CSS will be added to the first instance of that widget only.

I hope this helps.