The editor's hover controls CSS can be overridden by theme CSS containing "#something ul" selector.

[ZebulanStanphill]

Description

The CSS for the styling of the on-hover controls in the Elementor editor appear to use selectors that are too weak, resulting in something as generic as a check for "#something ul" overriding the CSS.

I noticed this while trying out the Elementor editor on a site using the Divi theme, though it is not a Divi-specific issue. It affects any theme that does the following:

1. Have CSS to define the padding of a ul tag that is a descendant of an element with a particular id. ("#something ul")
2. Uses that CSS id on an element used on every page, such as the div containing the content of the page.

(Note: I have checked, and a ".something ul" selector does NOT override the CSS, which is good.)

Steps to reproduce

1. Use a theme whose base CSS defines padding for ul tags that are descendants of an element with a certain id. (Set the padding to be something that will appear obvious when it is applied.)
2. Use the Elementor editor on a page where the on-hover controls will be descendants of an element with the aforementioned id, and look at the hover controls.

Easy version:

1. Use the Divi theme. (I tested on the latest version as of posting: 3.0.72, though I don't think this behavior should be any different on older/newer versions.)
2. Use the Elementor editor on a page and look at the hover controls.

[arielk]

Fix for v1.7.3.

Thanks for your feedback!