elementor / elementor

The most advanced frontend drag & drop page builder. Create high-end, pixel perfect websites at record speeds. Any theme, any page, any design.

Home Page:https://elementor.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Suggestion - Use "selector" only when needed in Custom CSS, not forced

pingram3541 opened this issue · comments

Currently when using the Pro Custom CSS feature we are restricted to css for that element and child selectors only. We can't apply hierarchical rules such as "body.is-special .some-elementor-selector a" For example, adding custom css to a text element like so:

a {
  color: blue;
}

results in:

.unique-elementor-selector-class a {
  color: blue;
}

However we can already do this using "selector" to achieve the same result:

selector a {
  color: blue;
}

So why not remove the forced inclusion and allow us full freedom to write our own rules, media queries, @font rules and most importantly body class selectors so we can truly refine our designs without leaving the designer?

This way if we have full control without sacrificing the simplicity of using custom because we still have the dynamic "selector" variable.

Yes we can do this with tools outside Elementor, but that's not what we want. =)

Another use case I just came across is when the design calls for absolute positioned elements I'd like to add rules such as:

body:not(.elementor-editor-active) .elementor-selector-section {
  position: absolute;
  ...
}

or:

body:not(.logged-in) .elementor-selector-section {
  position: absolute;
  ...
}

This way I get the desired results on the front end but do not break Elementor's inline editor controls mixed into the page content when editing.

Your right, we are going to improve this feature in the next version of E-pro..

Awesome, thanks for continuing to make this plugin amazing!

We released v1.0.5 please update and get it :)

Legendary! Thank you for doing this work over the holiday break too...