{"id":139764,"date":"2018-05-23T11:00:29","date_gmt":"2018-05-23T16:00:29","guid":{"rendered":"https:\/\/getflywheel.com\/?p=27270"},"modified":"2023-03-28T13:12:14","modified_gmt":"2023-03-28T18:12:14","slug":"css-specificity-guide","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/css-specificity-guide\/","title":{"rendered":"The Beginner&#8217;s Guide to CSS Specificity"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Have you ever tried to override a CSS rule, only to find it not working as it should have? Or noticed when one element is targeted multiple times with different CSS selector combinations, only one rule is applied at a time? This is all because of CSS specificity rules.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">CSS specificity rules can be one of the most confusing concepts to understand, especially for beginners.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you are just starting out with CSS, as a standard order rule, you might think the latest CSS rule should override the old one. It seems simple, but it doesn&#8217;t always work out that way. It depends on CSS specificity, when and which CSS rule should apply.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So let&#8217;s break down what CSS specificity is and how to use it efficiently.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is Specificity in CSS?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In simple words, if you have multiple CSS selectors for one element, the one with the higher specific value will be applied.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Different selectors have different weights and the browser will decide which one is the most relevant to that element.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How Does it Work?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The specificity of a selector can be categorized in the following four levels:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Inline style or CSS<\/li>\n\n\n\n<li>IDs<\/li>\n\n\n\n<li>Classes, pseudo-classes, and attributes<\/li>\n\n\n\n<li>Elements or pseudo-elements<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Inline styles<\/strong> or <strong>CSS<\/strong>, where CSS is applied directly on the HTML document, look like this <code>&lt;p style=\"margin-bottom: 0\"&gt;<\/code>. Inline styles will always have the highest specificity level.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Second in this order are <strong>IDs<\/strong>, like <code>#content<\/code>. So any selector using an ID will have the second highest specificity level.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Classes<\/strong>,<strong> pseudo-classes<\/strong>, and <strong>attributes<\/strong> are third in this order. They look like: <code>.post<\/code>, <code>:hover<\/code>, and <code>[title]<\/code>, respectively.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Elements and pseudo-elements have the least value. <code>li<\/code> and <code>:after<\/code> are basic examples of an element and pseudo-element.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/05\/2018-04-27_7-css-specificity.jpg\" alt=\"man coding at desk near bright blue wall\" class=\"wp-image-27280\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">The Calculation<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The specificity value can be calculated with the following guideline:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Inline style or css: 1,0,0,0<\/li>\n\n\n\n<li>ID: 0,1,0,0<\/li>\n\n\n\n<li>Class or pseudo-class and attribute: 0,0,1,0<\/li>\n\n\n\n<li>Elements and pseudo-elements: 0,0,0,1<\/li>\n\n\n\n<li>Universal selector(*): 0<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">To check your selector\u2019s specificity level, you can use the<a href=\"https:\/\/specificity.keegan.st\/\" target=\"_blank\" rel=\"noopener noreferrer\"> Specificity calculator<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Basic Rules of CSS Specificity<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now that you have an idea of how specificity is organized, let\u2019s discuss some general rules and examples!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is the base HTML I\u2019ll use in my examples. Here I have a small list within a container with <code>#content<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;css]\n&amp;amp;amp;amp;lt;div id=&amp;amp;amp;quot;content&amp;amp;amp;quot;&amp;amp;amp;amp;gt;\n\n&amp;amp;amp;amp;lt;ul class=&amp;amp;amp;quot;list&amp;amp;amp;quot;&amp;amp;amp;amp;gt;\n\n&amp;amp;amp;amp;lt;li&amp;amp;amp;amp;gt;Item 1&amp;amp;amp;amp;lt;li&amp;amp;amp;amp;gt;\n\n&amp;amp;amp;amp;lt;li&amp;amp;amp;amp;gt;Item 2&amp;amp;amp;amp;lt;\/li&amp;amp;amp;amp;gt;\n\n&amp;amp;amp;amp;lt;li&amp;amp;amp;amp;gt;Item 3&amp;amp;amp;amp;lt;\/li&amp;amp;amp;amp;gt;\n\n&amp;amp;amp;amp;lt;\/ul&amp;amp;amp;amp;gt;\n\n&amp;amp;amp;amp;lt;\/div&amp;amp;amp;amp;gt;\n\n&#091;\/css]<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Rule 1<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you have two or more of the same selectors for an element, they will all have the same specificity value, hence the lower one or the last one will be applied.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the following CSS snippet, both selectors have equal specificity, so the <code>li<\/code> color will be yellow, since it\u2019s placed further down the line.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;css]\n\nul li{\n\ncolor: green;\n\n}\n\nul li{\n\ncolor: yellow;\n\n}\n\n&#091;\/css]<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/specificity.keegan.st\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/05\/css-specificity-1.jpg\" alt=\"css containers color coded with numbers\" class=\"wp-image-27274\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Rule 2<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If multiple selectors are used for one element, the selector with the higher specific value will be applied.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the following example, <code>li<\/code> is targeted by two different selectors and both affect the font color. So, which rule should apply?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Like the previous instance, in CSS order concept the second one should apply (so the li color would be green) but because <code>.list li<\/code> has a higher specificity value than <code>ul li<\/code>, the color will remain red.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;css]\n\n.list li{\n\ncolor: red;\n\n}\n\nul li{\n\ncolor: green;\n\n}\n&#091;\/css]<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/specificity.keegan.st\/\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/05\/css-specificity-2.jpg\" alt=\"css containers color coded with numbers\" class=\"wp-image-27275\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Rule 3<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">We saw class outweigh elements in specificity level, now let&#8217;s see what happens with an ID.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the following example, &nbsp;we have a class and ID both targeting the same element and affecting the font color. Again the same question: which rule should apply?<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;css]\n\n.list li{\n\ncolor: red;\n\n}\n\nul li{\n\ncolor: green;\n\n}\n&#091;\/css]<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">As mentioned before, ID has higher specificity value than class, attributes, and elements, so the color will be blue. Always target <strong>ID<\/strong> for higher specificity level.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/specificity.keegan.st\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/05\/css-specificity-3.jpg\" alt=\"css containers color coded with numbers\" class=\"wp-image-27276\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Rule 4<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><code>!important<\/code> will override any selector of any specificity value. But keep in mind that <code>!important<\/code> shouldn&#8217;t be overused, because it&#8217;s not considered a CSS best practice.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you are the author of your CSS and not overriding an existing rule, you would hardly need to use <code>!important<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use <code>!important<\/code> only when you are trying to override someone else&#8217;s CSS and your specificity is not able to outweigh the previous selector, especially when you can&#8217;t control the placing order of your CSS in the HTML.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This will happen mostly while working in WordPress, where you will find many CSS files already added by different plugins and themes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Generally, plugin CSS is specific to the plugin and use IDs, inline-css, or even <code>!important<\/code> for higher specificity, to avoid any CSS conflict. To override that CSS, you have to use even higher specificity; for these scenarios you can use <code>!important<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the following example, I\u2019m recreating the previous scenarios, with <code>li<\/code> targeted with different CSS selectors, but you can see that <code>!important<\/code> overrides all rules and the color will be yellow.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;css]\n\n#content li{\n\ncolor: blue;\n\n}\n\n.list li{\n\ncolor: red;\n\n}\n\nul li{\n\ncolor: green;\n\n}\n\nul li{\n\ncolor: yellow !important;\n\n}\n\n&#091;\/css]<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><code>!important<\/code> will give you the power to enforce your CSS above any specificity level.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You need to be careful while using <code>!important<\/code> because you can&#8217;t override this rule. The only way to override an <code>!important<\/code> is to use another <code>!important<\/code> later in the CSS, so your CSS can easily look messy if you don&#8217;t understand the power of it.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">A few exceptions<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Elements and pseudo-elements have the least specificity, but there are a few interesting (and slightly confusing!) exceptions. (Confusing because they don&#8217;t seem to follow the rules we just saw.)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this example, you\u2019ll see &nbsp;<code>:first-child<\/code> (pseudo-class) and :first-line (pseudo-element). We just learned that pseudo-classes will have higher specificity than pseudo-elements, so according to that, the paragraph&#8217;s first line color should be green, but&nbsp;instead it will be pink.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;css]\n\np:first-child{\n\ncolor: green;\n\n}\n\np::first-line{\n\ncolor\n\n:pink\n\n;\n\n}\n\n&#091;\/css]<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">You may think the ordering would be an issue here, but even switching the order won&#8217;t change the output. The specificity calculator shows a different picture than the outcome.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/specificity.keegan.st\/\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/05\/css-specificity-4.jpg\" alt=\"css containers color coded with numbers\" class=\"wp-image-27277\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This is where specificity gets a bit confusing. I can only assume that the reason for this outcome is <code>:first-line<\/code> is closer to the element and probably treated as inline-style. You can check <a href=\"http:\/\/jsfiddle.net\/TimPietrusky\/2tw5w\/\" target=\"_blank\" rel=\"noopener noreferrer\">jsfiddle<\/a> for another example.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to use specificity efficiently?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If you understand the CSS specificity rules, you can use it very efficiently and make your CSS reusable.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s say you want to use the same <code>.button<\/code> but with different background colors, so you set up a specific selector: <code>.red-block .button<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;css]\n\n.button{\n\nbackground: #97bc2d;\n\nfont-size: 1em;\n\ndisplay: inline-block;\n\n}\n\n.button a{\n\ndisplay: block;\n\ncolor: #fff;\n\npadding: 1em 2em;\n\ntext-decoration: none;\n\n}\n\n.red-block .button{\n\nbackground: red;\n\n}\n\n&#091;\/css]<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">If <code>.button<\/code> is wrapped in a <code>.red-block<\/code> container, then the default button background color will change to red.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">CSS specificity is very useful when customizing WordPress themes, where you are trying to override the theme author\u2019s CSS with your own.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Common mistakes to avoid<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Some people use ultra-specific selectors, which is not a good practice. Be as specific as required only. For example, this code snippet targets the <code>li<\/code> but is too specific.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;css]\n\ndiv#content ul.list li{\n\ncolor: purple;\n\n}\n\n&#091;\/css]<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">If you are too specific with your CSS, it will become rigid and harder to re-use. You could easily write <code>.list li<\/code> instead of <code>div#content ul.list li<\/code>, which will make your CSS cleaner.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Additional resources<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"https:\/\/www.w3.org\/TR\/css3-selectors\/#specificity\" target=\"_blank\" rel=\"noopener noreferrer\">W3 org on specificity<\/a><\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"https:\/\/specificity.keegan.st\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS specificity calculator<\/a><\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"https:\/\/www.brunildo.org\/test\/IEASpec.html\" target=\"_blank\" rel=\"noopener noreferrer\">IE Bug<\/a><\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"http:\/\/fu2k.org\/alex\/css\/hacks\/fuzzyspecificity\" target=\"_blank\" rel=\"noopener noreferrer\">IE Hack<\/a><\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Conclusion<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">As you can see, CSS specificity is an important tool and every front-end developer should have it in their toolkit. A clear understanding of this concept can go a long way in making you a good front-end developer.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever tried to override a CSS rule, only to find it not working as it should have? Or noticed when one element is targeted multiple times with different CSS selector combinations, only one rule is applied at a time? This is all because of CSS specificity rules. CSS specificity rules can be one<span class=\"tile__ellipses\">&hellip;<\/span><span class=\"tile__ellipses--animated\"><\/span><\/p>\n","protected":false},"author":1,"featured_media":141967,"template":"","resource-topic":[901],"resource-role":[1397,896,897],"resource-type":[916],"class_list":["post-139764","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>The beginner&#039;s guide to CSS specificity<\/title>\n<meta name=\"description\" content=\"Make your code efficient and reusable by understanding CSS specificity rules! Add these tips to your dev toolkit.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The beginner&#039;s guide to CSS specificity\" \/>\n<meta property=\"og:description\" content=\"Make your code efficient and reusable by understanding CSS specificity rules! Add these tips to your dev toolkit.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/css-specificity-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-28T18:12:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2018\/05\/css-specificity-header.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"627\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/css-specificity-guide\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/css-specificity-guide\/\",\"name\":\"The beginner's guide to CSS specificity\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2018-05-23T16:00:29+00:00\",\"dateModified\":\"2023-03-28T18:12:14+00:00\",\"description\":\"Make your code efficient and reusable by understanding CSS specificity rules! Add these tips to your dev toolkit.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/css-specificity-guide\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/css-specificity-guide\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/css-specificity-guide\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"The Beginner&#8217;s Guide to CSS Specificity\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The beginner's guide to CSS specificity","description":"Make your code efficient and reusable by understanding CSS specificity rules! Add these tips to your dev toolkit.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"The beginner's guide to CSS specificity","og_description":"Make your code efficient and reusable by understanding CSS specificity rules! Add these tips to your dev toolkit.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/css-specificity-guide\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2023-03-28T18:12:14+00:00","og_image":[{"width":1200,"height":627,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2018\/05\/css-specificity-header.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/css-specificity-guide\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/css-specificity-guide\/","name":"The beginner's guide to CSS specificity","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2018-05-23T16:00:29+00:00","dateModified":"2023-03-28T18:12:14+00:00","description":"Make your code efficient and reusable by understanding CSS specificity rules! Add these tips to your dev toolkit.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/css-specificity-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/css-specificity-guide\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/css-specificity-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"The Beginner&#8217;s Guide to CSS Specificity"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2018\/05\/css-specificity-grid.png","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Designer, Developer, Freelancer","topic":"<strong>Topics:<\/strong> WordPress","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/139764","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/141967"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=139764"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=139764"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=139764"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=139764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}