Search
Close this search box.

Elementor CSS Selectors List

One of the features available on Elementor Pro is the ability to add custom CSS (Read: Elementor Free vs Pro). The feature allows you to go beyond as you can apply any styling when the styling you want is not available on the list of setting options. To add custom styling via custom CSS to a certain Elementor widget (or widget’s elements), you need to know the selector of the associated widget. We have collected the list of Elementor widget selectors to ease your job.

Every Elementor widget — and its elements — has a CSS selector which you can use to target the associated widget when you want to add custom CSS to achieve a certain styling. You can figure out the selector by inspecting the widget you want to add the custom CSS to.

Since inspecting a widget can only be done on a live page, it will be time consuming to inspect every one of them. That’s what led us to create this list.

How to Use a Selector

Say you want to apply a different size between the icon and text on a button. Since the default setting option doesn’t allow you to set a different size between the button icon and text, you can achieve it via custom CSS. You can either target the icon or text to apply a custom CSS to.

First, select the selector of the element you want to target (e.g., button icon). On the Elementor settings panel, go to the Advanced tab and open the Custom CSS block.

Type selector [selector name] {} on the custom CSS field. Here is the example.

Next, add your CSS content (declaration) inside the curly brackets. Here is the example.

Note: Each Elementor widget has a parent element (wrapper). Typing selector {} (without the selector name) means target the wrapper.

Elementor Widget Selectors List

Accordion

The Widget.elementor-accordion
Accordion Title.elementor-accordion-title
Accordion Description.elementor-tab-content
Accordion Icon Open.elementor-accordion-icon
Accordion Icon Closed.elementor-accordion-icon-closed

Alert

The Widget.elementor-alert
Alert Title.elementor-alert-title
Alert Description.elementor-alert-description
Dismiss Icon.elementor-alert-dismiss

Animated Headline

The Widget.elementor-headline
Static Text.elementor-headline-plain-text
Dynamic Text.elementor-headline-dynamic-wrapper

Archive Description

Archive Text.elementor-heading-title

Archive Posts

The Widget.elementor-widget-container
Post Item.elementor-grid-item
Featured Image.elementor-post__thumbnail
Badge on Cards Skin.elementor-post__badge
Avatar on Cards Skinimg.avatar
Text Content Area.elementor-post__text
Post Title.elementor-post__title
Post Excerpt.elementor-post__excerpt
Read More.elementor-post__read-more
Post Meta Area.elementor-post__meta-data
Post Date.elementor-post-date
Post Author.elementor-post-author
Post Time.elementor-post-time
Post Comment.elementor-post-avatar
Pagination.elementor-pagination
Previous Label.page-numbers.prev
Next Label.page-numbers.next
Pagination Number.page-numbers
Active Pagination Number.page-numbers.current
Load More Button.elementor-button-link
Load More Button Icon.elementor-button-icon

Author Box

The Widget.elementor-author-box
Avatar.elementor-author-box__avatar
Author Name.elementor-author-box__name
Author Bio.elementor-author-box__bio
Archive Button.elementor-author-box__button
The Widget.elementor-image-gallery
Gallery Item.gallery-item
Caption.wp-caption-text

Blockquote

The Widget.elementor-blockquote
Blockquote Content.elementor-blockquote__content
Blockquote Author.elementor-blockquote__author
Tweet Icon.elementor-blockquote__tweet-button
Tweet Label.elementor-blockquote__tweet-label

Button

The Widget.elementor-button
Button Text.elementor-button-text
Button Icon.elementor-button-icon

Call to Action

The Widget.elementor-cta
Header Image.elementor-cta__bg
Ribbon.elementor-ribbon
Ribbon Text.elementor-ribbon-inner
Content Title.elementor-cta__title
Content Description.elementor-cta__description
Content Button.elementor-cta__button

Countdown

The Widget.elementor-countdown-wrapper
Days.elementor-countdown-days
Hours.elementor-countdown-hours
Minutes.elementor-countdown-minutes
Seconds.elementor-countdown-seconds
Countdown Label.elementor-countdown-label

Counter

The Widget.elementor-counter
Number Prefix.elementor-counter-number-prefix
Number.elementor-counter-number
Number Suffix.elementor-counter-number-suffix
Title.elementor-counter-title

Divider

The Widget.elementor-divider
Separator.elementor-divider-separator
Text/Icon Element.elementor-divider__element

Flip Box

The Widget.elementor-flip-box
Front Container.elementor-flip-box__front
Back Container.elementor-flip-box__back
Content Container.elementor-flip-box__layer__inner
Content Title.elementor-flip-box__layer__title
Content Description.elementor-flip-box__layer__description
Content Button.elementor-flip-box__button

Form

The Widget.elementor-form
Step Container.e-form__indicators
Steps Number.e-form__indicators__indicator
Field Label.elementor-field-label
Field Text.elementor-field-textual
Text Field Label.elementor-field-type-text
Text Area Field Label.elementor-field-type-textarea
Email Field Label.elementor-field-type-email
URL Field Label.elementor-field-type-url
Tel Field Label.elementor-field-type-tel
Radio Field Label.elementor-field-type-radio
Select Field Label.elementor-field-type-select
Checkbox Field Label.elementor-field-type-checkbox
Acceptance Field Label.elementor-field-type-acceptance
Date Field Label.elementor-field-type-date
Time Field Label.elementor-field-type-time
Number Field Label.elementor-field-type-number
File Upload Field Label.elementor-field-type-upload
Next Buttone-form__buttons__wrapper__button-next
Previous Button.e-form__buttons__wrapper__button-previous
Submit Button.elementor-button
Gallery Title (for Multiple Gallery).elementor-gallery-title
Gallery Item.elementor-gallery-item
Description (on Overlay).elementor-gallery-item__description

Heading

The Widget.elementor-heading-title

Icon

The Widget.elementor-icon

Icon Box

The Widget.elementor-icon-box-wrapper
Icon.elementor-icon
Content Container.elementor-icon-box-content
Content Title.elementor-icon-box-title
Content Description.elementor-icon-box-description

Icon List

The Widget.elementor-icon-list-items
List Item.elementor-icon-list-item
List Icon.elementor-icon-list-icon
List Text.elementor-icon-list-text

Image

Imageimg
Caption.wp-caption-text

Image Box

Image.elementor-image-box-img
Text Content Container.elementor-image-box-content
Content Title.elementor-image-box-title
Content Descriptionelementor-image-box-description
Image Container.swiper-slide
Image Item.swiper-slide-image
Pagination Container.swiper-pagination
Pagination Dots.swiper-pagination-bullet
Previous Icon.elementor-swiper-button-prev
Next.elementor-swiper-button-next
Image Caption.elementor-image-carousel-caption
Media Item.elementor-carousel-image
Media Item Overlay.elementor-carousel-image-overlay
Dot Pagination.swiper-pagination-fraction
Previous Button.eicon-chevron-left
Next Button.eicon-chevron-right
Fraction Pagination.swiper-pagination-fraction
Progress Bar Pagination.swiper-pagination-progressbar
Progress Bar Pagination Fill.swiper-pagination-progressbar-fill
Mobile Menu Toggle.elementor-menu-toggle
Mobile Menu Icon.eicon-menu-bar
Regular Menu.elementor-nav-menu
Dropdown.elementor-nav-menu–dropdown
Menu Item with Sub-Menu.elementor-item.has-submenu
Sub-Menu Item.elementor-sub-item

PayPal Button

The Widget.elementor-payment-button
PayPal Button Icon.elementor-button-icon
PayPal Button Text.elementor-button-text

Portfolio

Portfolio Item.elementor-portfolio-item
Portfolio Item on Overlay.elementor-portfolio-item__overlay
Overlay Title.elementor-portfolio-item__title
Portfolio Filter.elementor-portfolio__filter

Post Comments

Reply Title.comment-reply-title
Comment Form Area.comment-form
Comment Form.comment-form-comment
Submit Button.form-submit

Post Content

The Widget.elementor-widget-theme-post-content
Content Area.elementor-widget-container

Post Info

The Widget.elementor-post-info
Avatar.elementor-avatar
Icon List.elementor-icon-list-icon
Icon Text.elementor-icon-list-text
List Item.elementor-post-info__terms-list-item

Post Navigation

The Widget.elementor-post-navigation
Previous Icon.post-navigation__arrow-prev
Previous Label.post-navigation__prev–label
Previous Post Title.post-navigation__prev–title
Next Icon.post-navigation__arrow-next
Next Label.post-navigation__next–label
Next Post Title.post-navigation__next–title

Posts

Post Item.elementor-post
Featured Image.elementor-post__thumbnail
Badge on Cards Skin.elementor-post__badge
Avatar on Cards Skinimg.avatar
Text Content Area.elementor-post__text
Post Title.elementor-post__title
Post Excerpt.elementor-post__excerpt
Read More.elementor-post__read-more
Post Meta Area.elementor-post__meta-data
Post Date.elementor-post-date
Post Author.elementor-post-author
Post Time.elementor-post-time
Post Comment.elementor-post-avatar
Pagination.elementor-pagination
Previous Label.page-numbers.prev
Next Label.page-numbers.next
Pagination Number.page-numbers
Active Pagination Number.page-numbers.current
Load More Button.elementor-button-link
Load More Button Icon.elementor-button-icon

Post Title

The Widget.elementor-heading-title

Price List

The Widget.elementor-price-list
List Item.elementor-price-list-item
List Item Image.elementor-price-list-image
List Item Text.elementor-price-list-text
List Item Header.elementor-price-list-header
List Item Title.elementor-price-list-title
List Item Separator.elementor-price-list-separator
List Item Price.elementor-price-list-price
List Item Description.elementor-price-list-description

Price Table

The Widget.elementor-price-table
Table Header.elementor-price-table__header
Table Header Title.elementor-price-table__heading
Table Header Description.elementor-price-table__subheading
Price.elementor-price-table__price
Currency.elementor-price-table__currency
Number After Price.elementor-price-table__after-price
Pricing Period.elementor-price-table__period
Feature List Area.elementor-price-table__features-list
Feature List Item.elementor-price-table__feature-inner
Table Footer.elementor-price-table__footer
Table Footer Button.elementor-price-table__button
Table Footer Text.elementor-price-table__additional_info
Ribbon.elementor-price-table__ribbon
Inner Ribbon.elementor-price-table__ribbon-inner

Progress Bar

Progress Bar.elementor-progress-bar
Progress Background.elementor-progress-wrapper
Progress Title.elementor-title
Progress Inner Text.elementor-progress-text
Progress Percentage.elementor-progress-percentage

Progress Tracker

The Widget.elementor-scrolling-tracker
Progress .current-progress-percentage

Reviews

The Widget.elementor-swiper
Review Item.swiper-slide
Review Header.elementor-testimonial__header
Reviewer Image.elementor-testimonial__image
Reviewer Name.elementor-testimonial__name
Reviewer Title.elementor-testimonial__title
Testimonial Content.elementor-testimonial__content
Testimonial Text.elementor-testimonial__text
Dot Pagination.swiper-pagination-bullet
Fraction Pagination.swiper-pagination-fraction
Fraction Pagination Current.swiper-pagination-current
Fraction Pagination Total.swiper-pagination-total
Progress Bar Pagination.swiper-pagination-progressbar
Progress Bar Pagination Fill.swiper-pagination-progressbar-fill
Previous Button.eicon-chevron-left
Next Button.eicon-chevron-right

Share Buttons

Button Item.elementor-share-btn
Button Icon.elementor-share-btn__icon
Button Text.elementor-share-btn__text

Slides

The Widget.elementor-slides-wrapper
Content Area.swiper-slide-contents
Content Heading.elementor-slide-heading
Content Description.elementor-slide-description
Content Button.elementor-slide-button
Dot Pagination.swiper-pagination-bullet
Previous Button.eicon-chevron-left
Next Button.eicon-chevron-right

Social Icons

The Widget.elementor-social-icons-wrapper
Icon Item.elementor-social-icon

Star Rating

The Widget.elementor-star-rating__wrapper
Rating Title.elementor-star-rating__title
Star Icon Area.elementor-star-rating
Full-filled Star Icon.elementor-star-full
Half-filled Star Icon.elementor-star-5
Empty Star Icon.elementor-star-empty

Table of Contents

The Widget.elementor-widget-container
ToC Header.elementor-toc__header
ToC Header Title.elementor-toc__header-title
Expand Button.elementor-toc__toggle-button–expand
Collapse Button.elementor-toc__toggle-button–expand
ToC Body.elementor-toc__body
ToC List Item.elementor-toc__list-item
ToC Top Level.elementor-toc__list-item-text.elementor-toc__top-level

Shortcode

The Widget.elementor-shortcode

Tabs

The Widget.elementor-tabs
Tab Title.elementor-tab-title
Tab Content.elementor-tab-content

Testimonial

The Widget.elementor-testimonial-wrapper
Testimonial Content.elementor-testimonial-content
Testimonial Meta.elementor-testimonial-meta
Testimonial Avatar.elementor-testimonial-image
Testimonial Name and Job Title.elementor-testimonial-details
Testimonial Name.elementor-testimonial-name
Testimonial Job Title.elementor-testimonial-job
The Widget.elementor-widget-container
Testimonial Slide Item.elementor-testimonial
Testimonial Content.elementor-testimonial__content
Testimonial Meta.elementor-testimonial__footer
Testimonial Avatar.elementor-testimonial__image
Testimonial Name and Job Title.elementor-testimonial__cite
Testimonial Name.elementor-testimonial__name
Testimonial Job Title.elementor-testimonial__title
Dot Pagination.swiper-pagination-bullet
Fraction Pagination.swiper-pagination-fraction
Fraction Pagination Current.swiper-pagination-current
Fraction Pagination Total.swiper-pagination-total
Progress Bar Pagination.swiper-pagination-progressbar
Progress Bar Pagination Fill.swiper-pagination-progressbar-fill
Previous Button.eicon-chevron-left
Next Button.eicon-chevron-right

Text Editor

The Widget.elementor-widget-text-editor

Toggle

The Widget.elementor-toggle
Toggle Item.elementor-toggle-item
Toggle Item Title.elementor-tab-title
Toggle Item Content.elementor-tab-content
Toggle Icon.elementor-toggle-icon
Toggle Icon Closed.elementor-toggle-icon-closed
Toggle Icon Open.elementor-toggle-icon-opened

The Bottom Line

While Elementor offers plenty of styling options for each widget, you can go beyond with custom CSS. To apply a custom styling to a widget (or its elements) via custom CSS, you need to know the selector of the associated widget. You can simply inspect a widget on a live page to figure out its selector. To save you time, we have created the list of the Elementor widget selectors so that you don’t have to inspect every single widget yourself.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Picture of Aliko Sunawang

Aliko Sunawang

Aliko is a WordPress expert and lead blogger at WPPagebuilders. He has been blogging with WordPress since 2012. He is responsible of all content published on this website.
Want to turn your WordPress knowledge into revenue? OF COURSE!

5 thoughts on “Elementor CSS Selectors List”

  1. Thanks for this great guide. This helped me a lot when I wanted to figure out how to style the Elementor TOC separately from my other CSS styled lists on my site.

    Bookmarked this for future reference as well.

    Reply
  2. This is fantastic. Thanks for posting. It will save me alot of time. Any ideas on how to customize the navigation arrows on Media Carousel? So far I have tried without success:

    .selector

    .eicon-chevron-left {content: url(“**********.svg”);
    }

    Thanks again
    Cheers

    Reply
    • Hi Boris. The selector is right. But make sure to remove the dot before the word “selector”.

      Reply

Leave a Comment

Share This
Haven’t used Elementor Pro yet?
Hey 👋🏻
Do you have a WP blog?
If so, you may need these. All the resources you need to grow your blog.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.

Want to Build Passive Income Like the One on the Screenshot Below?

Click the button on the right side to learn how 👉🏻
5 easy steps to turn your WordPress knowledge into monthly recurring revenue.

Click the above button to close the popup.