CSS Selector without element ID being prepended?

Developers
1

Hey folks,

How do you target an element outside the current element?

Says, in an element I have this control:

$this->controls['bgColor'] = [
    'label' => __('Background Color', 'textdomain'),
    'type'  => 'color',
    'css'   => [
        [
            'property' => 'background-color',
            'selector' => '.outside-element-class',
        ],
    ],
];

But, on the frontend, the output CSS is prefixed with element ID like: #brxe-abcxyz .outside-element-class {background-color: #foocolor}.

How to output the CSS without the element ID prefix?

2

The snippets below will generate responsive CSS breakpoints for all external controls.

I’m using this method in one of my custom element to responsively control the styling of an external popup element.

// Declare a property in your custom element class to store a reference to the external controls you want to style.

public $external_css_controls = [];

public function set_controls() {
  $this->controls['bgColor'] = [
    'label' => __('Background Color', 'textdomain'),
    'type'  => 'color',
    'css'   => [
        [
            'property' => 'background-color',
            'selector' => '.outside-element-class',
        ],
    ],
  ];
  $this->external_css_controls['bgColor'] = $this->controls['bgColor'];

  // continue for others ....
}

public function enqueue_scripts() {
  $settings = $this->settings;
  
  // assuming you enqueue style here
  wp_enqueue_style( 'custom-element-styles', get_stylesheet_directory_uri() . '/style.css', ['bricks-frontend'] );

  // generate responsive css for the controls
  if ( !empty($this->external_css_controls) ) {
    $desktop_css_string = '';
    $full_css = '';

    foreach ( $settings as $setting_key => $setting_value ) {
      $css_rules = \Bricks\Assets::generate_css_rules_from_setting( $settings, $setting_key, $setting_value, $this->external_css_controls, 'YOU CAN ADD OUTSIDE ELEMENT WRAPPER CLASS HERE OR LEAVE EMPTY', 'content' );

      if ( !empty($css_rules) ) {
        $desktop_css_string .= \Bricks\Assets::generate_inline_css_for_breakpoints( 'content', $css_rules );
      }
	}  
    
    if ( !empty($desktop_css_string) ) {
      $full_css = \Bricks\Assets::generate_inline_css_for_breakpoints( 'content', $desktop_css_string );
    }

    if ( !empty($full_css) ) {
      $full_css = \Bricks\Assets::minify_css($full_css);
      wp_add_inline_style( 'custom-element-styles', $full_css );	
    }
  }
}
2 Likes
3

Didn’t know this method. Thank you!