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 Skin | img.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 |
Basic Gallery
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 Button | e-form__buttons__wrapper__button-next |
Previous Button | .e-form__buttons__wrapper__button-previous |
Submit Button | .elementor-button |
Gallery
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
Image | img |
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 Description | elementor-image-box-description |
Image Carousel
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 Carousel
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 |
Nav Menu
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 Skin | img.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 |
Testimonial Carousel
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.
5 thoughts on “Elementor CSS Selectors List”
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.
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
Hi Boris. The selector is right. But make sure to remove the dot before the word “selector”.
Can you post the selectors for the new Menu widget? Thanks a bunch!
Thank you soooooo much!