DEV Community

Cover image for How to Use CSS Selector in Elementor
Aliko Sunawang
Aliko Sunawang

Posted on • Edited on

9

How to Use CSS Selector in Elementor

Elementor is arguably the best plugin to create a website in WordPress. Especially for those putting design on the emphasis. Elementor is a page builder plugin for everyone. From novice users to advanced users with CSS knowledge.

Although Elementor already offers plenty of design options for its design elements (called widgets), you might want more. If you have CSS knowledge, you can apply certain styling (that is not available in Elementor by default) using custom CSS.

In Elementor, you can apply a certain styling via custom CSS to each widget (and elements of a widget) on your design. Each Elementor widget has a unique CSS class as the selector. To find out the Elementor widget selector, you can simply inspect the widget on your web browser (make sure to run the inspect on a live page).

Acessing Custom CSS Feature in Elementor

The custom CSS feature of Elementor can be accessed on the Advanced tab on the settings panel. Simply go to Advanced -> Custom CSS to access it. You can place your CSS code on the Custom CSS block.

How to Use CSS Selector in Elementor

As mentioned earlier, each Elementor widget (and its elements if it has ones) has a unique class selector. You can find out the class name by inspecting the associated widget on web browser. To inspect a widget, you can right-click on the on a widget and select Inspect.

For example, the selector name of the Heading widget is .elementor-heading-title as you can see on the screenshot below.

Image description

After finding the selector name belongs to a widget, you can type the following format on the Custom CSS field.

selector [selector name] {}

You can place your declaration inside the curly brackets. Example:

selector .elementor-button{
border: 4px solid red;
}

The code above will result in the following output.

Image description

If a widget has child elements, you can also target a specific element to apply the custom CSS to. For instance, the text element of the Button widget has the selector name of .elementor-button-text. So, if you replace the selector on the code above with the selector of the text element as below,

selector .elementor-button-text{
border: 4px solid red;
}

It will result in the following output.

Image description

Each Elementor widget has a parent element (wrapper). To target the wrapper, you can simply type selector {}. Example:

selector {
border: 4px solid red;
}

The code above will result in the following outout.

Image description

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (1)

Collapse
 
learnwithshakib profile image
Md shakib ahmed

I appreciate the author of this post sharing something special. I am super excited to share that I have found Ezytor. Developers can easily edit their websites with this editor. EZYTOR is a drag-and-drop website builder.

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay