How to use selector in custom CSS tab

Use "selector" (without the leading period) to point to a container element.

For example, if you've placed an image (or any child elements) in a column, you might want to style the wrapper that surrounds the image or the image itself.

Let's put a 5px solid red border around the various elements to see what happens.

First, drag an image widget onto a column and go to Image> Advanced> CSS personalizado

Now, in the Custom CSS tab, enter the following:

selector {border: 5px solid red; }

Since you are editing the Image widget, you might be surprised to find that the border does not surround the image at all. Instead, it surrounds the container element, which in this case, is the column that the image is in.

To specify the child element, or in this case, the image, enter the following in the custom CSS:

selector img {border: 5px solid red; }

This will place the border around the image because you have specified that it should affect the "img selector".

Now try this with another example.

Drag a button widget onto a column and give it 10 pixels of padding so you can clearly see the surrounding column. Do this by going to the button Advanced tab and settings Filling to 10 for all sides.

Your button should now look like this (your colors may vary):

Next, let's apply a background color using custom CSS.

Enter the following:

selector {background-color: #ffff00; }

As before, this will be applied to the envelope of the button element, rather than the button itself. This time, you'll notice that the 10px padding prevents the entire column from being affected by our styling.

And of course, if you want the background color to be applied to the button instead of its wrapping, you can enter the following instead:

selector .elementor-button {background-color: #ffff00; }

Esto dará como resultado que el fondo del botón be amarillo.

Use selector as an Elementor shortcut to help you write custom CSS faster and easier. However, you always have the option of using your own custom class.

Let's remake the background of that button, but this time, we'll give the button a custom class, which we'll call "so yellow." (To go Advanced> CSS Classes and be sure not to include the previous point here).

Now, in the custom CSS tab, instead of using "selector", we will simply reference the custom class ".so-yellow", and yes, you will need to include the previous point here.

Unsurprisingly, the button wrapper now shows our bright yellow color as the background.

What happens if we then point to the button?

Enter the following:

.so-yellow .elementor-button {background-color: #ffff00; }

You will notice that the purple color of the button does not NO change!

That's because our new style needs a !important added statement in this case.

.so-yellow .elementor-button {background-color: #ffff00! important; }

Now our style is applied and our button is yellow again.

Just for fun, and to prevent our button text from getting lost on the bright yellow background, let's finish designing the button by changing the text color. We will also add a border to the button. Regardless of which method you use, “selector .elementor-button” or “.so-yellow .elementor-button”, the additional code will be the same.

selector .elementor-button {background-color: #ffff00; color: #000000; border: 2px solid #000000; }

Enjoy using selector whenever you want to quickly add custom CSS to target that element's container.

Tip: For a list of class names, see Excellent Widget Class Names Reference Guide by Frank Tielemans