{"id":57453,"date":"2025-05-19T15:53:22","date_gmt":"2025-05-19T12:53:22","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=57453"},"modified":"2025-07-01T14:48:04","modified_gmt":"2025-07-01T11:48:04","slug":"prioritize-conflicting-styles","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/prioritize-conflicting-styles\/","title":{"rendered":"Prioritize conflicting styles"},"content":{"rendered":"\n<p>Styling elements in the Elementor Editor V4 is built around the idea of classes. For more information about classes in V4, see <a href=\"https:\/\/elementor.com\/help\/classes-in-elementor\">Classes in Elementor<\/a>.&nbsp;<\/p>\n\n\n\n<p>Working with classes has many advantages, especially the opportunity to reuse elements, making your work faster and more efficient. However, using classes can, at times, mean that you are adding conflicting styles to an element. For example, a paragraph element may have a class that sets the text color to green and another class that sets the text color to red. How does the Editor determine which color to use?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Prioritizing classes and identifying conflicts<\/h2>\n\n\n\n<p>In the following example we\u2019ll use two classes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Red_text: This class is set to turn the text red.<\/li>\n\n\n\n<li>Green_text: This class is set to turn the text green.<\/li>\n<\/ul>\n\n\n\n<p>To learn how to create classes, see <a href=\"https:\/\/elementor.com\/help\/classes-in-elementor\">Classes in Elementor<\/a>.<\/p>\n\n\n\n<p>To demonstrate class priority and conflict identification, let\u2019s create a sample element.&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add a Paragraph element to the canvas.<br>Since we haven\u2019t styled the paragraph, it will use the default text color &#8211; black.<br><img fetchpriority=\"high\" decoding=\"async\" width=\"680\" height=\"321\" class=\"wp-image-57455\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-16.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-16.png 1206w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-16-300x142.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-16-1024x483.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-16-768x362.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/>&nbsp;<\/li>\n\n\n\n<li>Click the <strong>Style<\/strong> tab.<br><img decoding=\"async\" width=\"280\" height=\"252\" class=\"wp-image-57456\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-17.png\" alt=\"\"><\/li>\n<\/ol>\n\n\n\n<p>The top of the Style tab has the <strong>Classes<\/strong> text box. The <strong>Classes<\/strong> text box contains the names of all the classes that apply to the element. Right now, the only class that applies to the element is <strong>Local<\/strong>.&nbsp;<\/p>\n\n\n\n<p>Local is a special class. Every element has a local class that applies only to that element. At this point, we haven\u2019t added any styles to the local class so the Paragraph element is using the default settings.<\/p>\n\n\n\n<p>Now let\u2019s add some color to the text.<br><img decoding=\"async\" width=\"680\" height=\"210\" class=\"wp-image-57457\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-18.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-18.png 1206w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-18-300x93.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-18-1024x316.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-18-768x237.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the <strong>Classes<\/strong> text box, add the class <strong>Red_text<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p>The text turns red because it uses the color set by the Red_text class.<\/p>\n\n\n\n<p>Now, let\u2019s look at indicators. Indicators show you what settings are being used for your element.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"793\" class=\"wp-image-57458\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-19.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-19.png 250w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-19-106x300.png 106w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open the <strong>Typography<\/strong> field and look at the <strong>Text color<\/strong> setting. The indicator dot is green showing that this is the setting that will be used.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>[callout type=&#8221;note&#8221;]If you were to close the Typography field, an indicator dot would appear by the word Typography. Indicators appear by any Style setting that has a value. See below for a chart of what the color of the indicator means.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"362\" class=\"wp-image-59010\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Field-indicators.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Field-indicators.png 616w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Field-indicators-232x300.png 232w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><br>[\/callout]<\/p>\n\n\n\n<p>Now go to the local class and look at the Typography setting.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"785\" class=\"wp-image-57459\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-20.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-20.png 251w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-20-107x300.png 107w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/p>\n\n\n\n<p>There is a gray dot by <strong>Text Color<\/strong>. That shows this element contains a different class that sets the text color.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"272\" class=\"wp-image-57460\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-21.png\" alt=\"\"><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>We\u2019ll go back to the <strong>Classes<\/strong> text box and add the class <strong>Green_text<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p>Notice that despite the fact that we added the Green_text class after the Red_text class, it shifts to the left of the Red_class. Classes to the left always take priority over the classes to the right. This means that <strong>local<\/strong> class will always take the highest priority as it is always the leftmost class.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"244\" class=\"wp-image-57461\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-22.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-22.png 1208w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-22-300x108.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-22-1024x368.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-22-768x276.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/p>\n\n\n\n<p>To understand why, click the Class Manager icon to open the Class Manager. For details, see <a href=\"https:\/\/elementor.com\/help\/the-elementor-editor-class-manager\">The Elementor Editor Class Manager<\/a>.&nbsp;<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"329\" class=\"wp-image-57462\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-23.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-23.png 264w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-23-255x300.png 255w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/>&nbsp;&nbsp;<\/p>\n\n\n\n<p>Notice that <strong>Green_text<\/strong> is above <strong>Red_text<\/strong>, meaning it has priority over <strong>Red_text<\/strong>. Any element with both <strong>Green_text<\/strong> and <strong>Red_text<\/strong> will adopt the <strong>Green_text<\/strong> settings.<\/p>\n\n\n\n<p>If we look at the <strong>Typography<\/strong> settings for each class we\u201dll see:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the <strong>Red_text<\/strong> class there is an orange dot by <strong>Text color<\/strong> <img loading=\"lazy\" decoding=\"async\" width=\"99\" height=\"29\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdurA__7LT01JLEXelEcZxgZ7uxs3H_0V5bk_7eLcW7iZWm9r0ya8T_ERRoUGBRe23jURnirnukrcKc8tNo4A45cZFtoGBzhPC1fFS1waqsyU5HSmayz94N7MqTqpkbwi58EBw?key=qzb6HNs8KOoIEJo-rkVcbuLx\">. This shows that there is another class overriding the setting for this class.<\/li>\n\n\n\n<li>In the <strong>Green_text<\/strong> class there is a green dot by <strong>Text color<\/strong> <img loading=\"lazy\" decoding=\"async\" width=\"99\" height=\"29\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeLDF860uXXnxfSBQ8G-mHeu_mbXCFBHSsyd8-IdcJMpHRxjpR9aI4PVdlVpqEu4zMjcJ9ObSeIMTD2kQVL68gLH3wSrBB4ZHHel0YJ-vAxdjr7Plj8QatfSVgrNvyzjT29Muo?key=qzb6HNs8KOoIEJo-rkVcbuLx\">. This shows that this is the color used in this element.&nbsp;&nbsp;<\/li>\n\n\n\n<li>In the <strong>local<\/strong> class there is a gray dot by <strong>Text color<\/strong> <img loading=\"lazy\" decoding=\"async\" width=\"99\" height=\"29\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdGYiU2uH0ppsCKOmvoGPqqxnu0PItL_rX2s9g0hTl-cdXvA4g_JXEHCiKYJb0f1VzyI0GKLfiZqS5cAhC_iwU4ZFdIixOrUJpGe0c_0WW9teuG9F8xUFnvFuwGB0cTXGrIQ5g?key=qzb6HNs8KOoIEJo-rkVcbuLx\">. This shows that this element has another class determining this setting but it doesn\u2019t clash with this class.<\/li>\n<\/ul>\n\n\n\n<p>Finally, let\u2019s see what happens when we edit the local class.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"443\" class=\"wp-image-57463\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-24.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-24.png 1206w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-24-300x195.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-24-1024x667.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-24-768x500.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In <strong>Typography<\/strong>, change the <strong>Text color<\/strong>.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>The text changes to that color because the <strong>local<\/strong> class always takes the highest priority. The indicator next to <strong>Text color<\/strong> turns pink, indicating that this color is local and has the top priority.<\/p>\n\n\n\n<p>Below is a chart of indicators and what they mean:<br>[callout type=&#8221;note&#8221;]These indicators appear by settings that contain values and by fields, such as <strong>Size<\/strong> and <strong>Typography<\/strong>, that contain settings with values. There can be multiple indicators next to field names as there may be individual settings in these fields that have different statuses. For instance, a Typography field can contain a <strong>Font type<\/strong> that is being used by this setting (green indicator) and a <strong>Font size<\/strong> that is being determined by a different setting (orange indicator). <\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Indicator<\/strong><\/td><td><strong>What it means<\/strong><\/td><\/tr><tr><td>Pink<\/td><td>Value set by the local class. Can never be overridden.<\/td><\/tr><tr><td>Green<\/td><td>This setting is currently determined by this class. This can be changed by rearranging the class priorities.&nbsp;<\/td><\/tr><tr><td>Gray<\/td><td>This setting is currently determined by another class.&nbsp;<\/td><\/tr><tr><td>Orange<\/td><td>This setting is currently determined by a different class. This can be changed by rearranging the class priorities or can be overridden by the <strong>local<\/strong> class.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Identify which class is being used<\/h2>\n\n\n\n<p>The indicators explained above show you where there are conflicts but can also provide more exact information. Click on an indicator, and a popup explains exactly what style it&#8217;s using and what style(s) it is ignoring.&nbsp;<\/p>\n\n\n\n<p>We&#8217;ll use the classes in the example above to see how it works.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li> Drag a Paragraph element onto the canvas.<\/li>\n\n\n\n<li>Create the <strong>Red_text<\/strong> and <strong>Green_text<\/strong> classes as mentioned above.<br><img loading=\"lazy\" decoding=\"async\" width=\"380\" height=\"236\" class=\"wp-image-58857\" style=\"width: 380px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/This-is-what-the-classes-field-should-look-like.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/This-is-what-the-classes-field-should-look-like.png 612w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/This-is-what-the-classes-field-should-look-like-300x186.png 300w\" sizes=\"(max-width: 380px) 100vw, 380px\" \/><br>This is what the Classes field should look like.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"516\" class=\"wp-image-58858\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Open-the-Typography-field.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Open-the-Typography-field.png 612w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Open-the-Typography-field-163x300.png 163w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Open-the-Typography-field-556x1024.png 556w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>In the panel, open the Typography field.<br>[callout type=&#8221;note&#8221;]The indicator next to the word Typography shows that there is some conflict in the typography fields.[\/callout]<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"290\" class=\"wp-image-58860\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/The-first-popup-.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/The-first-popup-.png 582w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/The-first-popup--290x300.png 290w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>Click the indicator next to <strong>Text Color<\/strong>.<br>A popup shows the name of the conflicting classes. The properties of the class not being used are struck through.<\/li>\n<\/ol>\n\n\n\n<p>The editor&#8217;s responsive editing capabilities allow you to set different classes for different size screens. As an example, we&#8217;ll set different font sizes for desktops and mobiles.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add a Paragraph element to the canvas and enter some text.<\/li>\n\n\n\n<li>Open the <strong>Typography<\/strong> field.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"349\" class=\"wp-image-58863\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/set-the-font-size-to-14-scaled.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/set-the-font-size-to-14-scaled.png 2560w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/set-the-font-size-to-14-300x154.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/set-the-font-size-to-14-1024x526.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/set-the-font-size-to-14-768x394.png 768w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/set-the-font-size-to-14-1536x788.png 1536w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/set-the-font-size-to-14-2048x1051.png 2048w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n\n\n\n<li>In the <strong>Font size<\/strong> counter, enter <strong>14<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"107\" class=\"wp-image-58864\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Click-the-mobile-icon-1-scaled.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Click-the-mobile-icon-1-scaled.png 2560w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Click-the-mobile-icon-1-300x47.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Click-the-mobile-icon-1-1024x161.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Click-the-mobile-icon-1-768x121.png 768w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Click-the-mobile-icon-1-1536x241.png 1536w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Click-the-mobile-icon-1-2048x321.png 2048w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n\n\n\n<li>Click the mobile icon.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"350\" class=\"wp-image-58865\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Set-the-mobile-font-size-to-24-scaled.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Set-the-mobile-font-size-to-24-scaled.png 2560w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Set-the-mobile-font-size-to-24-300x155.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Set-the-mobile-font-size-to-24-1024x528.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Set-the-mobile-font-size-to-24-768x396.png 768w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Set-the-mobile-font-size-to-24-1536x791.png 1536w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Set-the-mobile-font-size-to-24-2048x1055.png 2048w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n\n\n\n<li>Open the <strong>Typography<\/strong> field and set the text size to <strong>24<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"714\" class=\"wp-image-58867\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Click-the-indicator-by-Font-size.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Click-the-indicator-by-Font-size.png 608w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Click-the-indicator-by-Font-size-118x300.png 118w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Click-the-indicator-by-Font-size-402x1024.png 402w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/Click-the-indicator-by-Font-size-603x1536.png 603w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>Click the indicator by <strong>Font Size<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"155\" class=\"wp-image-58871\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/The-second-popup.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/The-second-popup.png 562w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/The-second-popup-300x167.png 300w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>The popup shows which font size is used for mobile and which for desktops. Since we&#8217;re in mobile mode, the desktop property is struck through. <\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Styling elements in the Elementor Editor V4 is built around the idea of classes. For more information about classes in V4, see Classes in Elementor.&nbsp; Working with classes has many advantages, especially the opportunity to reuse elements, making your work faster and more efficient. However, using classes can, at times, mean that you are adding [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":[],"footnotes":""},"categories":[1509],"tags":[1513],"class_list":["post-57453","post","type-post","status-publish","format-standard","hentry","category-features","tag-v4"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Prioritize conflicting styles | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Prioritize conflicting styles in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; 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\/prioritize-conflicting-styles\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Prioritize conflicting styles | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Prioritize conflicting styles in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/prioritize-conflicting-styles\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-19T12:53:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-01T11:48:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-16.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1206\" \/>\n\t<meta property=\"og:image:height\" content=\"569\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Cliff Churgin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Cliff Churgin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/prioritize-conflicting-styles\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/prioritize-conflicting-styles\/\"},\"author\":{\"name\":\"Cliff Churgin\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\"},\"headline\":\"Prioritize conflicting styles\",\"datePublished\":\"2025-05-19T12:53:22+00:00\",\"dateModified\":\"2025-07-01T11:48:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/prioritize-conflicting-styles\/\"},\"wordCount\":1093,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/prioritize-conflicting-styles\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-16.png\",\"keywords\":[\"V4\"],\"articleSection\":[\"Features\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/prioritize-conflicting-styles\/\",\"url\":\"https:\/\/elementor.com\/help\/prioritize-conflicting-styles\/\",\"name\":\"Prioritize conflicting styles | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/prioritize-conflicting-styles\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/prioritize-conflicting-styles\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-16.png\",\"datePublished\":\"2025-05-19T12:53:22+00:00\",\"dateModified\":\"2025-07-01T11:48:04+00:00\",\"description\":\"Learn everything about Prioritize conflicting styles in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/prioritize-conflicting-styles\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/prioritize-conflicting-styles\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/prioritize-conflicting-styles\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-16.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-16.png\",\"width\":1206,\"height\":569},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/prioritize-conflicting-styles\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Editor V4\",\"item\":\"https:\/\/elementor.com\/help\/v4-editor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Features\",\"item\":\"https:\/\/elementor.com\/help\/v4-editor\/features\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Prioritize conflicting styles\"}]},{\"@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\/c45726ca48a077e09198d78da3bc94d3\",\"name\":\"Cliff Churgin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"caption\":\"Cliff Churgin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Prioritize conflicting styles | Elementor","description":"Learn everything about Prioritize conflicting styles 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\/prioritize-conflicting-styles\/","og_locale":"en_US","og_type":"article","og_title":"Prioritize conflicting styles | Elementor","og_description":"Learn everything about Prioritize conflicting styles in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/prioritize-conflicting-styles\/","og_site_name":"Help","article_published_time":"2025-05-19T12:53:22+00:00","article_modified_time":"2025-07-01T11:48:04+00:00","og_image":[{"width":1206,"height":569,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-16.png","type":"image\/png"}],"author":"Cliff Churgin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Cliff Churgin","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/prioritize-conflicting-styles\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/prioritize-conflicting-styles\/"},"author":{"name":"Cliff Churgin","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3"},"headline":"Prioritize conflicting styles","datePublished":"2025-05-19T12:53:22+00:00","dateModified":"2025-07-01T11:48:04+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/prioritize-conflicting-styles\/"},"wordCount":1093,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/prioritize-conflicting-styles\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-16.png","keywords":["V4"],"articleSection":["Features"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/prioritize-conflicting-styles\/","url":"https:\/\/elementor.com\/help\/prioritize-conflicting-styles\/","name":"Prioritize conflicting styles | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/prioritize-conflicting-styles\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/prioritize-conflicting-styles\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-16.png","datePublished":"2025-05-19T12:53:22+00:00","dateModified":"2025-07-01T11:48:04+00:00","description":"Learn everything about Prioritize conflicting styles in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/prioritize-conflicting-styles\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/prioritize-conflicting-styles\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/prioritize-conflicting-styles\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-16.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-16.png","width":1206,"height":569},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/prioritize-conflicting-styles\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Editor V4","item":"https:\/\/elementor.com\/help\/v4-editor\/"},{"@type":"ListItem","position":3,"name":"Features","item":"https:\/\/elementor.com\/help\/v4-editor\/features\/"},{"@type":"ListItem","position":4,"name":"Prioritize conflicting styles"}]},{"@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\/c45726ca48a077e09198d78da3bc94d3","name":"Cliff Churgin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","caption":"Cliff Churgin"}}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/57453","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\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=57453"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/57453\/revisions"}],"predecessor-version":[{"id":68568,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/57453\/revisions\/68568"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=57453"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=57453"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=57453"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}