Parse Element CSS

Elementor Core Advanced

Elementor has a hook that lets developers add new CSS rules to the element before the CSS file is generated.

Hook Details

• Hook Type: Action Hook
• Hook Name: elementor/element/parse_css
• Affects: Frontend

Hook Arguments

Argument	Type	Description
post_css	\Elementor\Core\Files\CSS\Post	The post CSS file instance
element	\Elementor\Element_Base	The element instance

Example

Let's add a simple CSS rule to the generated CSS files:

/**
 * Add custom CSS rule.
 *
 * @since 1.0.0
 * @param \Elementor\Core\Files\CSS\Post $post_css_file The post CSS file instance.
 * @param \Elementor\Element_Base        $element       The element instance.
 */
function add_custom_css_rule_to_the_css_file( $post_css_file, $element ) {

	$post_css_file->get_stylesheet()->add_rules(
		'.my-selector',
		[
			'width' => '50px',
			'height' => '50px',
		]
	);

}
add_action(	'elementor/element/parse_css', 'add_custom_css_rule_to_the_css_file', 10, 2 );

Now let's add a CSS rule with a unique elementor selector:

/**
 * parse element CSS.
 *
 * @since 1.0.0
 * @param \Elementor\Core\Files\CSS\Post $post_css_file The post CSS file instance.
 * @param \Elementor\Element_Base        $element       The element instance.
 */
function add_custom_rules_to_css_file( $post_css_file, $element ) {

	$item_width = some_get_theme_config_function( 'item_width' );
	$item_height = some_get_theme_config_function( 'item_height' );

	$post_css_file->get_stylesheet()->add_rules(
		$element->get_unique_selector(),
		[
			'width' => $item_width . 'px',
			'height' => $item_height . 'px',
		]
	);

}
add_action(	'elementor/element/parse_css', 'add_custom_rules_to_css_file', 10, 2 );