{"id":354,"date":"2023-08-05T10:06:19","date_gmt":"2023-08-05T07:06:19","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=354"},"modified":"2024-01-14T14:51:09","modified_gmt":"2024-01-14T12:51:09","slug":"how-to-use-selector-in-the-custom-css-tab","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/how-to-use-selector-in-the-custom-css-tab\/","title":{"rendered":"Use selector In the custom CSS tab"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Use “selector” (without the leading dot) to target a wrapper element.<\/h3>\n\n\n\n

For example, if you\u2019ve placed an image (or any child element) in a column, you may want to style either the wrapper surrounding the image, or the image itself.<\/p>\n\n\n\n

Let\u2019s place a solid 5px red border around the various elements to see what happens.<\/p>\n\n\n\n

First, drag an Image widget into a column, and go to Image > Advanced > Custom CSS<\/em><\/p>\n\n\n\n

Now, in the Custom CSS tab, enter the following:<\/p>\n\n\n\n

selector { border: 5px solid red; } <\/code><\/p>\n\n\n\n

Because you are editing the Image widget, you might be surprised to discover that the border does not surround the image at all. Instead, it surrounds the wrapper element, which in this case, is the column that the image is within.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

To specify the child element, or in this case, the image, enter the following into the Custom CSS instead:<\/p>\n\n\n\n

selector img { border: 5px solid red; } <\/code><\/p>\n\n\n\n

This will place the border around the image because you\u2019ve specified that it should affect the \u201cselector img\u201d.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\n\n\n\n

Now try this with another example.<\/strong><\/p>\n\n\n\n

Drag a Button widget into a column, and give it 10px of padding so you can see the column surrounding it nicely. Do this by going to the button\u2019s Advanced <\/em>tab, and setting Padding <\/em>to 10 for all sides.<\/p>\n\n\n\n

Your button should now look something like this (your colors may vary):<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Next, let\u2019s apply a background color using Custom CSS.<\/p>\n\n\n\n

Enter the following:<\/p>\n\n\n\n

selector { background-color: #ffff00; } <\/code><\/p>\n\n\n\n

As before, this will apply to the wrapper of the button element, rather than the button itself. This time, you\u2019ll notice that the 10px of padding prevents the entire column from being affected by our style.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

And of course, if you want the background color to apply to the button instead of its wrapper, you can enter the following instead:<\/p>\n\n\n\n

selector .elementor-button { background-color: #ffff00; } <\/code><\/p>\n\n\n\n

This will result in the button\u2019s background being yellow.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\n\n\n\n

Use selector<\/em> as an Elementor shortcut to help you write Custom CSS more quickly and easily. You always have the option, however, of using your own custom class instead.<\/p>\n\n\n\n

Let\u2019s redo that button background, but this time, we\u2019ll give the button a custom class, which we\u2019ll name \u201cso-yellow\u201d. (Go to Advanced > CSS Classes<\/em> and make sure you don\u2019t include the preceding dot here).<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Now, in the Custom CSS tab, instead of using \u201cselector\u201d, we\u2019ll simply reference the custom class \u201c.so-yellow\u201d, and yes, you will need to include the preceding dot here.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

As expected, the button\u2019s wrapper now shows our bright yellow color for its background.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

What happens if we then target the button itself?<\/strong><\/p>\n\n\n\n

Enter the following:<\/p>\n\n\n\n

.so-yellow .elementor-button { background-color: #ffff00; } <\/code><\/p>\n\n\n\n

You\u2019ll notice that the button\u2019s purple color does NOT <\/strong>change!<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

That’s because our new style needs an !important<\/em> declaration added in this case.<\/p>\n\n\n\n

.so-yellow .elementor-button { background-color: #ffff00 !important; } <\/code><\/p>\n\n\n\n

Now, our styling is applied, and our button is yellow again.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Just for fun, and to prevent our button\u2019s text from being lost in the bright yellow background, let\u2019s finish styling the button by changing the text\u2019s color. We’ll also add a border to the button as well. Regardless of which method you use, \u201cselector .elementor-button\u201d or \u201c.so-yellow .elementor-button\u201d, the additional code will be the same.<\/p>\n\n\n\n

selector .elementor-button { background-color: #ffff00; color: #000000; border: 2px solid #000000; } <\/code><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Enjoy using selector<\/em> whenever you want to quickly add Custom CSS to target that element\u2019s wrapper.<\/p>\n\n\n\n

Tip: For a list of Class names, see Frank Tielemans’ excellent Widget Classname Reference Guide<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Learn how to use “selector” to target a wrapper element in custom CSS tab<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["65a3d8bd8803d2dd7d4fc13b"],"footnotes":""},"categories":[1440],"tags":[1389,1388,1390,1398,1235],"class_list":["post-354","post","type-post","status-publish","format-standard","hentry","category-advanced-functionality","tag-advanced","tag-agency","tag-expert","tag-legacy-essential","tag-pro"],"acf":[],"yoast_head":"\nUse selector In the custom CSS tab | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Use selector In the custom CSS tab in this article from Elementor's Knowledge Base. Get Elementor tips & more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/how-to-use-selector-in-the-custom-css-tab\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Use selector In the custom CSS tab | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Use selector In the custom CSS tab in this article from Elementor's Knowledge Base. Get Elementor tips & more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/how-to-use-selector-in-the-custom-css-tab\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-05T07:06:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-14T12:51:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/selector.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"369\" \/>\n\t<meta property=\"og:image:height\" content=\"419\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Alan Kaler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alan Kaler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/how-to-use-selector-in-the-custom-css-tab\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/how-to-use-selector-in-the-custom-css-tab\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\"},\"headline\":\"Use selector In the custom CSS tab\",\"datePublished\":\"2023-08-05T07:06:19+00:00\",\"dateModified\":\"2024-01-14T12:51:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/how-to-use-selector-in-the-custom-css-tab\/\"},\"wordCount\":563,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/how-to-use-selector-in-the-custom-css-tab\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/selector.jpg\",\"keywords\":[\"Advanced\",\"Agency\",\"Expert\",\"Legacy Essential\",\"Pro\"],\"articleSection\":[\"Advanced functionality\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/help\/how-to-use-selector-in-the-custom-css-tab\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/how-to-use-selector-in-the-custom-css-tab\/\",\"url\":\"https:\/\/elementor.com\/help\/how-to-use-selector-in-the-custom-css-tab\/\",\"name\":\"Use selector In the custom CSS tab | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/how-to-use-selector-in-the-custom-css-tab\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/how-to-use-selector-in-the-custom-css-tab\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/selector.jpg\",\"datePublished\":\"2023-08-05T07:06:19+00:00\",\"dateModified\":\"2024-01-14T12:51:09+00:00\",\"description\":\"Learn everything about Use selector In the custom CSS tab in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/how-to-use-selector-in-the-custom-css-tab\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/how-to-use-selector-in-the-custom-css-tab\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/how-to-use-selector-in-the-custom-css-tab\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/selector.jpg\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/selector.jpg\",\"width\":369,\"height\":419},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/how-to-use-selector-in-the-custom-css-tab\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor Editor\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Widgets\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Advanced functionality\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/advanced-functionality\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Use selector In the custom CSS tab\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/#website\",\"url\":\"https:\/\/elementor.com\/help\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\",\"name\":\"Alan Kaler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"caption\":\"Alan Kaler\"},\"description\":\"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Use selector In the custom CSS tab | Elementor","description":"Learn everything about Use selector In the custom CSS tab in this article from Elementor's Knowledge Base. Get Elementor tips & more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/help\/how-to-use-selector-in-the-custom-css-tab\/","og_locale":"en_US","og_type":"article","og_title":"Use selector In the custom CSS tab | Elementor","og_description":"Learn everything about Use selector In the custom CSS tab in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/how-to-use-selector-in-the-custom-css-tab\/","og_site_name":"Help","article_published_time":"2023-08-05T07:06:19+00:00","article_modified_time":"2024-01-14T12:51:09+00:00","og_image":[{"width":369,"height":419,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/selector.jpg","type":"image\/jpeg"}],"author":"Alan Kaler","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alan Kaler","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/how-to-use-selector-in-the-custom-css-tab\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/how-to-use-selector-in-the-custom-css-tab\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430"},"headline":"Use selector In the custom CSS tab","datePublished":"2023-08-05T07:06:19+00:00","dateModified":"2024-01-14T12:51:09+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/how-to-use-selector-in-the-custom-css-tab\/"},"wordCount":563,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/how-to-use-selector-in-the-custom-css-tab\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/selector.jpg","keywords":["Advanced","Agency","Expert","Legacy Essential","Pro"],"articleSection":["Advanced functionality"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/help\/how-to-use-selector-in-the-custom-css-tab\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/how-to-use-selector-in-the-custom-css-tab\/","url":"https:\/\/elementor.com\/help\/how-to-use-selector-in-the-custom-css-tab\/","name":"Use selector In the custom CSS tab | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/how-to-use-selector-in-the-custom-css-tab\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/how-to-use-selector-in-the-custom-css-tab\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/selector.jpg","datePublished":"2023-08-05T07:06:19+00:00","dateModified":"2024-01-14T12:51:09+00:00","description":"Learn everything about Use selector In the custom CSS tab in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/how-to-use-selector-in-the-custom-css-tab\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/how-to-use-selector-in-the-custom-css-tab\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/how-to-use-selector-in-the-custom-css-tab\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/selector.jpg","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/selector.jpg","width":369,"height":419},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/how-to-use-selector-in-the-custom-css-tab\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Elementor Editor","item":"https:\/\/elementor.com\/help\/elementor-editor\/"},{"@type":"ListItem","position":3,"name":"Widgets","item":"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/"},{"@type":"ListItem","position":4,"name":"Advanced functionality","item":"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/advanced-functionality\/"},{"@type":"ListItem","position":5,"name":"Use selector In the custom CSS tab"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430","name":"Alan Kaler","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","caption":"Alan Kaler"},"description":"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/354","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=354"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/354\/revisions"}],"predecessor-version":[{"id":43119,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/354\/revisions\/43119"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}