{"id":94,"date":"2026-04-08T15:15:46","date_gmt":"2026-04-08T15:15:46","guid":{"rendered":"https:\/\/ghlcss.com\/blog\/?p=94"},"modified":"2026-04-23T15:25:00","modified_gmt":"2026-04-23T15:25:00","slug":"ghl-css-selectors-targeting-guide","status":"publish","type":"post","link":"https:\/\/ghlcss.com\/blog\/ghl-css-selectors-targeting-guide\/","title":{"rendered":"GHL CSS Selectors: How to Target and Style Any Element"},"content":{"rendered":"<style>.kb-table-of-content-nav.kb-table-of-content-id94_d5eaa0-02 .kb-table-of-content-wrap{padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);border-top:2px solid #cc66ff;border-right:2px solid #cc66ff;border-bottom:2px solid #cc66ff;border-left:2px solid #cc66ff;border-top-left-radius:10px;border-bottom-right-radius:10px;}.kb-table-of-content-nav.kb-table-of-content-id94_d5eaa0-02 .kb-table-of-contents-title-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id94_d5eaa0-02 .kb-table-of-contents-title{font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id94_d5eaa0-02 .kb-table-of-content-wrap .kb-table-of-content-list{font-weight:regular;font-style:normal;margin-top:var(--global-kb-spacing-sm, 1.5rem);margin-right:0px;margin-bottom:0px;margin-left:0px;}@media all and (max-width: 1024px){.kb-table-of-content-nav.kb-table-of-content-id94_d5eaa0-02 .kb-table-of-content-wrap{border-top:2px solid #cc66ff;border-right:2px solid #cc66ff;border-bottom:2px solid #cc66ff;border-left:2px solid #cc66ff;}}@media all and (max-width: 767px){.kb-table-of-content-nav.kb-table-of-content-id94_d5eaa0-02 .kb-table-of-content-wrap{border-top:2px solid #cc66ff;border-right:2px solid #cc66ff;border-bottom:2px solid #cc66ff;border-left:2px solid #cc66ff;}}<\/style>\n\n\n<p>Are you struggling to change a specific button or text block in <strong>GoHighLevel (GHL)<\/strong>? Sometimes, the standard settings don&#8217;t let you change everything. This is where <strong>GHL CSS selectors<\/strong> come in. To use custom code, you must first find the &#8220;name&#8221; of the element you want to style.<\/p>\n\n\n\n<p>In this guide, we will show you how to find any GHL selector using your browser. This will help you master <a href=\"https:\/\/ghlcss.com\/\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/ghlcss.com\/\" rel=\"noreferrer noopener\">GHL CSS<\/a> and build truly unique funnels.<\/p>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns94_0335af-61{gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns94_0335af-61 .kt-button{font-weight:normal;font-style:normal;}.kt-btns94_0335af-61 .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns94_0335af-61 .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns94_0335af-61 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns94_0335af-61 .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns94_0335af-61 .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns94_0335af-61 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns94_0335af-61 .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns94_0335af-61\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn94_68d57e-8c.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn94_68d57e-8c.kb-button{color:var(--global-palette2, #2B6CB0);border-top-left-radius:10px;border-bottom-right-radius:10px;border-top-color:#cc66ff;border-top-style:solid;border-right-color:#cc66ff;border-right-style:solid;border-bottom-color:#cc66ff;border-bottom-style:solid;border-left-color:#cc66ff;border-left-style:solid;}@media all and (max-width: 1024px){.wp-block-kadence-advancedbtn .kb-btn94_68d57e-8c.kb-button{border-top-color:#cc66ff;border-top-style:solid;border-right-color:#cc66ff;border-right-style:solid;border-bottom-color:#cc66ff;border-bottom-style:solid;border-left-color:#cc66ff;border-left-style:solid;}}@media all and (max-width: 767px){.wp-block-kadence-advancedbtn .kb-btn94_68d57e-8c.kb-button{border-top-color:#cc66ff;border-top-style:solid;border-right-color:#cc66ff;border-right-style:solid;border-bottom-color:#cc66ff;border-bottom-style:solid;border-left-color:#cc66ff;border-left-style:solid;}}<\/style><a class=\"kb-button kt-button button kb-btn94_68d57e-8c kt-btn-size-standard kt-btn-width-type-full kb-btn-global-outline  kt-btn-has-text-true kt-btn-has-svg-false  wp-block-kadence-singlebtn\" href=\"https:\/\/link.leadsflex.com\/schedule-quickcall\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"kt-btn-inner-text\">Get a Free Custom Growth Plan Call<\/span><\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">What is a CSS Selector?<\/h2>\n\n\n\n<p>A selector is like an address for a piece of code. It tells the browser, &#8220;Apply this color only to this specific button.&#8221; In GHL, almost every element has a unique ID or a shared Class.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Common Types of Selectors in GHL:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Class Selectors (.):<\/strong> Used for groups of items, like all buttons on a page.<\/li>\n\n\n\n<li><strong>ID Selectors (#):<\/strong> Used for one specific item, like a single unique form field.<\/li>\n\n\n\n<li><strong>Element Selectors:<\/strong> Used for general parts like <code>h1<\/code> (headers) or <code>p<\/code> (paragraphs).<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to Find GHL Selectors Using Chrome DevTools<\/h2>\n\n\n\n<p>You don&#8217;t need to be a programmer to find selectors. You can use a free tool already inside your Google Chrome browser.<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Open your GHL page:<\/strong> View your live funnel or website.<\/li>\n\n\n\n<li><strong>Right-Click:<\/strong> Hover over the element you want to change and click <strong>Inspect<\/strong>.<\/li>\n\n\n\n<li><strong>Find the Code:<\/strong> A window will open on the right. Look for the highlighted line of code.<\/li>\n\n\n\n<li><strong>Copy the ID or Class:<\/strong> Look for text like <code>id=\"button-123\"<\/code> or <code>class=\"elButton\"<\/code>.<\/li>\n<\/ol>\n\n\n\n<p>Once you find the ID, you can use it to create a <a href=\"https:\/\/ghlcss.com\/blog\/ghl-dashboard-css-white-label-branding\/\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/ghlcss.com\/blog\/ghl-dashboard-css-white-label-branding\/\" rel=\"noreferrer noopener\">GHL Dashboard CSS<\/a> layout that is completely custom.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Common GHL Selectors Table<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Element Name<\/strong><\/td><td><strong>Common GHL CSS Selector<\/strong><\/td><td><strong>What it Controls<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>Main Button<\/strong><\/td><td><code>.elButton<\/code><\/td><td>Every button in the funnel builder.<\/td><\/tr><tr><td><strong>Form Input<\/strong><\/td><td><code>.form-control<\/code><\/td><td>The boxes where users type their info.<\/td><\/tr><tr><td><strong>Section<\/strong><\/td><td><code>.inner<\/code><\/td><td>The white space inside a section.<\/td><\/tr><tr><td><strong>Headline<\/strong><\/td><td><code>.elHeadline<\/code><\/td><td>The main big text at the top of a page.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Write Your First Selector Code<\/h2>\n\n\n\n<p>Once you have the selector name, you can write your CSS. If you found a class named <code>.elButton<\/code>, your code would look like this:<\/p>\n\n\n\n<p>CSS<\/p>\n\n\n\n<pre class=\"wp-block-code has-background\" style=\"background-color:#cc66ff\"><code>.elButton {\n  background-color: #ff0000 !important;\n  text-transform: uppercase !important;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">The Power of the &#8220;Inspect&#8221; Tool<\/h3>\n\n\n\n<p>When you are in the &#8220;Inspect&#8221; window, you can actually type new colors or sizes directly into the browser. This lets you see the changes <strong>before<\/strong> you save them in GHL. It is a great way to test your design without breaking anything.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tips for Targeting GHL Elements<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Use Specific IDs for One-Time Changes<\/h3>\n\n\n\n<p>If you change <code>.elButton<\/code>, <strong>every<\/strong> button on your page will change. If you only want to change the &#8220;Buy Now&#8221; button, use its specific ID (like <code>#button-1632<\/code>).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Watch Out for Nested Elements<\/h3>\n\n\n\n<p>Sometimes GHL puts a button inside a &#8220;wrapper&#8221; div. If your CSS isn&#8217;t working, try targeting the parent element first.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Keep a &#8220;Cheat Sheet&#8221;<\/h3>\n\n\n\n<p>As you find selectors for things like <a href=\"https:\/\/ghlcss.com\/blog\/ghl-membership-site-css-styling-guide\/\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/ghlcss.com\/blog\/ghl-membership-site-css-styling-guide\/\" rel=\"noreferrer noopener\">GHL Membership Sites<\/a>, save them in a notes file. This makes your next project much faster.<\/p>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns94_2234db-b6{gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns94_2234db-b6 .kt-button{font-weight:normal;font-style:normal;}.kt-btns94_2234db-b6 .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns94_2234db-b6 .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns94_2234db-b6 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns94_2234db-b6 .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns94_2234db-b6 .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns94_2234db-b6 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns94_2234db-b6 .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns94_2234db-b6\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn94_757476-03.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn94_757476-03.kb-button{color:var(--global-palette2, #2B6CB0);border-top-left-radius:10px;border-bottom-right-radius:10px;border-top-color:#cc66ff;border-top-style:solid;border-right-color:#cc66ff;border-right-style:solid;border-bottom-color:#cc66ff;border-bottom-style:solid;border-left-color:#cc66ff;border-left-style:solid;}@media all and (max-width: 1024px){.wp-block-kadence-advancedbtn .kb-btn94_757476-03.kb-button{border-top-color:#cc66ff;border-top-style:solid;border-right-color:#cc66ff;border-right-style:solid;border-bottom-color:#cc66ff;border-bottom-style:solid;border-left-color:#cc66ff;border-left-style:solid;}}@media all and (max-width: 767px){.wp-block-kadence-advancedbtn .kb-btn94_757476-03.kb-button{border-top-color:#cc66ff;border-top-style:solid;border-right-color:#cc66ff;border-right-style:solid;border-bottom-color:#cc66ff;border-bottom-style:solid;border-left-color:#cc66ff;border-left-style:solid;}}<\/style><a class=\"kb-button kt-button button kb-btn94_757476-03 kt-btn-size-standard kt-btn-width-type-full kb-btn-global-outline  kt-btn-has-text-true kt-btn-has-svg-false  wp-block-kadence-singlebtn\" href=\"http:\/\/gohighlevel.com\/30-day-trial?fp_ref=leadsflex\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"kt-btn-inner-text\">Claim Your $10K Bonuses + Free Funnels<\/span><\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently Asked Questions (FAQs)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Why is my CSS selector not working?<\/h3>\n\n\n\n<p>Most likely, GHL&#8217;s default style is &#8220;stronger&#8221; than yours. Add <code>!important<\/code> to the end of your CSS line to fix this.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Can I find selectors on a mobile phone?<\/h3>\n\n\n\n<p>It is very hard to do this on a phone. It is best to use a laptop or desktop computer with the Chrome browser.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Do I need to find selectors for every page?<\/h3>\n\n\n\n<p>No. Many elements, like buttons and forms, use the same class names across all GHL funnels.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Learning how to find <strong>GHL CSS selectors<\/strong> is the &#8220;superpower&#8221; of a top-tier agency. It allows you to move past the basic drag-and-drop features. Once you know how to target elements, you can design anything you can imagine. Start by inspecting your favorite funnel today and see how it was built!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Are you struggling to change a specific button or text block in GoHighLevel (GHL)? Sometimes, the standard settings don&#8217;t let you change everything. This is where GHL CSS selectors come in. To use custom code, you must first find the &#8220;name&#8221; of the element you want to style. In this guide, we will show you&#8230;<\/p>\n","protected":false},"author":1,"featured_media":95,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-94","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-setup-guides"],"_links":{"self":[{"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/posts\/94","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/comments?post=94"}],"version-history":[{"count":2,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/posts\/94\/revisions"}],"predecessor-version":[{"id":114,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/posts\/94\/revisions\/114"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/media\/95"}],"wp:attachment":[{"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/media?parent=94"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/categories?post=94"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/tags?post=94"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}