How To Use Selector In The Custom CSS Tab

The Custom CSS tab will provide much flexibility when you are building your pages as it helps you add functionality to your design beyond the wide scope of features and possibilities that Neuron Themes offers. 

Each element/column/section will have the option to add custom code, simply select the element/column/section's handle to open its options panel, go to Advanced Tab > and under Custom CSS you have the space needed to make the changes necessary. 

In order to target the wrapper element use the selector. Let's see how it works. 

Let's say you have a button placed on your page. Click the element's handle and go to the Advanced Tab, click on Custom CSS, and here if you use the selector tag and try to add a background color for the button something like 

selector {background-color: #0000; } 

The background color will be applied to the wrapper element rather than the element itself. This means the background color will be applied to the space around the element. To target the element instead of its wrapper then you should specify the name of the element as well. 

selector .button {background-color: #0000; }

This will have the style to be applied to the element directly, not the wrapper. 

How to use the CSS Classes 

The selector as a tag can be used as a short and easy way to write CSS code in your design, this will help fasten your workflow. But instead of the selector, you can specify the element its own CSS Class that you can use when adding custom code.

To do that simply go to the Advanced tab of the element/column/section and under CSS Classes type in your own custom class, let's say button-class ( you can dare to be a little more creative than this). 

That same class will be replaced with the selector tag and writing custom CSS code made sure to write a preceding doe in front of the custom class. 

Example: .button-class {background-color: #0000}