CSS Selector for horizontal line of a divider widget?

[Mike_Rodgers]

I have a question about selecting or defining a CSS selector for the horizontal line in an Elementor divider widget. First of all, is this possible? I have tried standard selectors (div, hr, etc.) in addition to defining specific class and ID names (eg., my-class, my-id, etc.) and then using these definitions as selectors in CSS, but none of this works. What I would like to do is to have a divider line color change during scroll for use with a CSS sticky header. Does anyone have any ideas of how I might do this? Thank you!

 

[Stefan]

Hey, have you tried?

selector {

}


or

selector .xyz {

}

*xyz = class name

Best regards

 

[Stefan]

Or create it with an "html" Widget inside of Elementor.

HTML:
<hr>

CSS:
selector {
display: block; height: 1px;
border: 0; border-top: 1px solid black;
margin: 1em 0; padding: 0; }
}

 

[Mike_Rodgers]

Thank you, yes, I tried applying the class name “my-class” and used “selector .my-class {color: lightblue}” in the Custom CSS field. But that did not work (nor did using “my-id” and “selector #my-id”). I’ve begun to think that the line used by the divider widget is not HTML but some other language that cannot be styled with CSS.

I just tried the HTML widget with <hr>, and of course that works perfectly well. Not sure why I didn’t think of that sooner. Anyway, thank you!