Is there a way to have CSS in an html widget only affect the elements contained therein?

Question

I've created an html widget with some custom CSS that is affecting the "label" element in the Admin tools. 
 Here's the sample code which is something I may use to create a custom navigation and help users find specific content. 
 Note that I have the labels styled with a background color, when you hover over the label. 
 Here's what's happening in the Admin tools, as a result ➞

ruckus · Accepted Answer

I'm by no means a CSS developer - consider that! But I glanced at it. Maybe, this would help... 
 
 /*Styles {CURRENT}*/ 
 label : hover { 
 cursor : pointer; 
 background-color : #f2f2f2; 
 position : relative; 
 } 
 
 /*Styles {MAYBE}*/ 
 input + label : hover { 
 cursor : pointer; 
 background-color : #f2f2f2; 
 position : relative; 
 } 
 
 BTW: Has line 124 got a typo? 'em' instead of 'm'.

Luke R Davidson · Answer

Like I said. Put your class name in the CSS Class input box on the widget overview page in widget studio ( don&rsquo;t include the . In front of the name). That should apply that class to the widget div wrapper. It is for the exact purpose you are explaining

Michael Monteleone · Answer

The way to do this would be to give a widget-specific class name in the "CSS Class Name" property. It doesn't matter what it is, as long as it's unique to your widget. So, if the widget was named "My Custom Wiget", you could maybe name the CSS class "my-custom-widget". Then, in your CSS, you can target any HTML elements in the widget as follows. Say you have a div with class "hello"

Hello World

Your custom CSS could be: .my-custom-widget .hello { font-weight: bold; color: green; } Note the selector, ".my-custom-widget .hello". This tells the browser to style an element with class "hello" that is inside an element with class "my-custom-widget". Since all of your elements would be inside "my-custom-widget", all you need to do is make sure you prefix all your selectors with ".my-custom-widget ". If, alternatively, you are using a custom LESS stylesheet in your theme, you could simplify the CSS selectors further. But it's not necessary, and it doesn't seem you are doing that.

Luke R Davidson · Answer

On the widget overview page, you should see something like this 
 put in a name, then in your CSS .my-custom-name label { my styles } // or whatever you want for classes

Luke R Davidson · Answer

For that you would need to use something like LESS and reference it via the theme, or add the compiled CSS to the widget.

Michael Monteleone · Answer

To do this, I'd recommend using a custom LESS stylesheet in your theme instead. The theme supports LESS pre-processing, so you can write simpler styles, such as: 
 So, instead of writing something like: 
 .my-custom-widget .hello {
 /* styles */
}

.my-custom-widget .hello2 {
 /* styles */
}

.my-custom-widget .hello3 {
 /* styles */
} 
 You could write: 
 .my-custom-widget {
 .hello {
 // styles 
 }

 .hello2 {
 // styles 
 }

 .hello3 {
 // styles 
 } 
}

 
 ...which then gets converted to CSS.

Luke R Davidson · Answer

You just need to scope your css selector better. If you only want it to affect your HTML widget, you can add a CSS class to the widget that will be applied to the wrapper, then use that as part of your selector.

Is there a way to have CSS in an html widget only affect the elements contained therein?

Top Replies