{"id":243882,"date":"2016-08-02T08:49:35","date_gmt":"2016-08-02T15:49:35","guid":{"rendered":"http:\/\/css-tricks.com\/?p=243882"},"modified":"2019-12-06T07:58:49","modified_gmt":"2019-12-06T14:58:49","slug":"precedence-css-order-css-matters","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/precedence-css-order-css-matters\/","title":{"rendered":"Precedence in CSS (When Order of CSS Matters)"},"content":{"rendered":"

On your average CSS-writin’ day, odds are you won’t even think about precedence in CSS. It doesn’t come up a whole heck of a lot. But it does matter! It comes up any time multiple CSS selectors match an element with the exact same specificity<\/a>. <\/p>\n

\n

Assuming specificity is exactly the same, order does<\/em> matter.<\/p>\n

Styles declared later<\/em> win.<\/div>\n

<\/p>\n

Within a single stylesheet<\/h3>\n

Say we have some HTML like this:<\/p>\n

<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <title>Document<\/title>\r\n  <link rel=\"stylesheet\" href=\"styles.css\">\r\n<\/head>\r\n<body>\r\n  <div class=\"module module-foo module-bar\">\r\n    Module\r\n  <\/div>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n
The order of the attributes in the HTML don’t<\/em> matter. It’s the order in the stylesheet. Let’s focus on the background<\/code>:<\/p>\n
\/* \r\n  All of these selectors match\r\n  and they all have the same specificity\r\n*\/\r\n\r\n.module {\r\n  background: #ccc;\r\n  padding: 20px;\r\n  max-width: 400px;\r\n  margin: 20px auto;\r\n}\r\n\r\n.module-foo {\r\n  background: orange;\r\n}\r\n\r\n\/* LAST declared, so these property\/values win *\/\r\n.module-bar {\r\n  background: lightblue; \/* I win! *\/\r\n\r\n  \/* I still have all the _other_ styles as well *\/\r\n}<\/code><\/pre>\n
An intentionally convoluted example<\/h3>\n
Order is not<\/em> limited to a single stylesheet. The order of the stylesheet in the document matters even more.<\/p>\n
Check out this document with three distinct style… uh… let’s call them chunks. A chunk being either a <link rel=\"stylesheet\"><\/code>, a <style><\/code> block, or an @import<\/code>ed stylesheet. <\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <title>Document<\/title>\r\n\r\n  <!-- #1 -->\r\n  <link rel=\"stylesheet\" href=\"1.css\">\r\n\r\n  <!-- #2 -->\r\n  <style>\r\n    .module-baz {\r\n      background-color: pink;\r\n    }\r\n  <\/style>\r\n\r\n<\/head>\r\n<body>\r\n  <div class=\"module module-foo module-bar module-baz\">\r\n    Module\r\n  <\/div>\r\n\r\n  <!-- #3 -->\r\n  <style>\r\n    @import \"2.css\";\r\n    \/*\r\n      Contains\r\n      .module-bar { background: #f06d06; }\r\n    *\/\r\n  <\/style>\r\n\r\n<\/body>\r\n<\/html><\/code><\/pre>\n
I labeled the chunks #1, #2, and #3. All of them contain CSS selectors with the same exact specificity. #3 is the last declared, so it wins the precedence battle.<\/p>\n
Async loaded CSS still respects document order<\/h3>\n
Perhaps you’re loading CSS with an awesome CSS loader like loadCSS<\/a>. What happens if we were to load a fourth CSS file with it with the exact same setup as the “convoluted” example above? <\/p>\n
loadCSS injects the stylesheet at the bottom of the <head><\/code> by default, so it would become #3 and the <style><\/code> block at the bottom of the body would become #4 and thus win.<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <title>Document<\/title>\r\n  <link rel=\"stylesheet\" href=\"1.css\">\r\n\r\n  <script src=\"loadCSS.js\"><\/script>\r\n  <script>\r\n    loadCSS(\"2.css\");\r\n  <\/script>\r\n\r\n  <!-- 2.css will be injected right here -->\r\n<\/head>\r\n<body>\r\n  <div class=\"module module-foo module-bar module-late\">\r\n    Module\r\n  <\/div>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n
It’s actually invalid (although it works) to have a <link><\/code> or <style><\/code> block as a child of the <body><\/code>, so it would be really rare for a stylesheet loaded by loadCSS to not be the winner by default.<\/p>\n
Also, you can specify an ID to target so you can control CSS order:<\/p>\n
<script id=\"loadcss\">\r\n  \/\/ load a CSS file just before the script element containing this code\r\n  loadCSS(\"path\/to\/mystylesheet.css\", document.getElementById(\"loadcss\"));\r\n<\/script><\/code><\/pre>\n
Does Critical CSS get weird?<\/h3>\n
One of the reason you might use loadCSS at all is because you’re intentionally trying to defer loading of your stylesheet, because you’re injecting critical CSS<\/a> into the <head><\/code> to try and get styles into the first packet and speed up rendering.<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <title>Document<\/title>\r\n  <style>\r\n    \/* #1 \r\n       Critical CSS chunk up here *\/\r\n  <\/style>\r\n  <script>\r\n    \/* #2\r\n       Load the rest of the CSS \r\n    *\/\r\n  <\/script>\r\n<\/head>\r\n<body>\r\n  <div class=\"module module-foo module-bar\">\r\n    Module\r\n  <\/div>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n
The practice of critical CSS involves moving up CSS selectors into a higher chunk. The #1 chunk. The lowest-order and easiest-to-override chunk. So, theoretically, yes, there could be conflicts\/changes in what CSS gets applied when comparing the page with just<\/em> the critical CSS applied and with the CSS fully loaded. But the stylesheet does fully load, and comes after the critical CSS, so it will ultimately be as-intended. <\/p>\n
You might might need to fine-tune exactly what makes it into critical CSS and what does not – to avoid weird flash-of-style-changes. <\/p>\n
Do extends get weird?<\/h3>\n
In a preprocessor, they can. <\/p>\n
Say you want to style a thing with a variation:<\/p>\n
<div class=\"module module-variation\">Module<\/div><\/code><\/pre>\n
And the (super simplified for demo purposes) preprocessor code ends up like:<\/p>\n
%variation {\r\n  background: orange;\r\n}\r\n\r\n.module {\r\n  background: #ccc;\r\n  padding: 20px;\r\n  max-width: 400px;\r\n  margin: 20px auto;\r\n}\r\n\r\n.module-variation {\r\n  @extend %variation;\r\n}<\/code><\/pre>\n
You’d think… OK, .module-variation<\/code> is the LAST declared selector, so it wins, so the background should be orange. But it’s not, because the extend moves the selector to where the thing it’s extending is defined, which in our case is before what we are trying to override. The compiled CSS is:<\/p>\n
.module-variation {\r\n  background: orange;\r\n}\r\n\r\n.module {\r\n  background: #ccc;\r\n  padding: 20px;\r\n  max-width: 400px;\r\n  margin: 20px auto;\r\n}<\/code><\/pre>\n
So the background<\/code> is actually #ccc<\/code>, not what we want. Probably easiest to solve this with specificity rather than source order.<\/p>\n
Native extends, should they become a thing<\/a>, would presumably be less confusing.<\/p>\n
It’s a silly thing to manage<\/h3>\n
Nobody wants to think about this. Winning style with specificity is way easier. But knowing about it is a good idea, because unnecessary specificity bloat is a bummer too.<\/p>\n
And on we dance.<\/p>\n","protected":false},"excerpt":{"rendered":"
On your average CSS-writin’ day, odds are you won’t even think about precedence in CSS. It doesn’t come up a […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[],"class_list":["post-243882","post","type-post","status-publish","format-standard","hentry","category-articles"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":392696,"url":"https:\/\/css-tricks.com\/alternatives-to-the-important-keyword\/","url_meta":{"origin":243882,"position":0},"title":"Alternatives to the !important Keyword","author":"Saleh Mubashar","date":"April 7, 2026","format":false,"excerpt":"Cascade layers, specificity tricks, smarter ordering, and even some clever selector hacks can often replace !important with something cleaner, more predictable, and far less embarrassing to explain to your future self.","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"Example CSS of a super-important class selector with importance set on the color alice blue, but it is stricken through.","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/03\/important-style.webp?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/03\/important-style.webp?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/03\/important-style.webp?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/03\/important-style.webp?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/03\/important-style.webp?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":188628,"url":"https:\/\/css-tricks.com\/css-specificity-graph-generator\/","url_meta":{"origin":243882,"position":1},"title":"CSS Specificity Graph Generator","author":"Chris Coyier","date":"November 18, 2014","format":false,"excerpt":"Spikes are bad, and the general trend should be towards higher specificity later in the stylesheet. Jonas Ohlsson created a tool around Harry Roberts concept.","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":300141,"url":"https:\/\/css-tricks.com\/the-order-of-css-classes-in-html-doesnt-matter\/","url_meta":{"origin":243882,"position":2},"title":"The Order of CSS Classes in HTML Doesn\u2019t Matter","author":"Robin Rendle","date":"December 17, 2019","format":false,"excerpt":"That\u2019s right! And I can prove it, too. Let\u2019s look at some CSS first: .a { color: red; } .b { color: blue; } And now let\u2019s look at some markup: Here\u2019s some text The text is going to be blue because .b is defined last in the CSS, right?\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/div-classes.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/div-classes.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/div-classes.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/div-classes.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/div-classes.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":375144,"url":"https:\/\/css-tricks.com\/taming-the-cascade-with-bem-and-modern-css-selectors\/","url_meta":{"origin":243882,"position":3},"title":"Taming the Cascade With BEM and Modern CSS Selectors","author":"Liam Johnston","date":"November 21, 2022","format":false,"excerpt":"BEM. Like seemingly all techniques in the world of front-end development, writing CSS in a BEM format can be polarizing. But it is \u2013 at least in my Twitter bubble \u2013 one of the better-liked CSS methodologies. Personally, I think BEM is good, and I think you should use it.\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/is-where-funnels.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/is-where-funnels.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/is-where-funnels.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/is-where-funnels.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/is-where-funnels.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":353462,"url":"https:\/\/css-tricks.com\/an-interview-with-elad-shechter-on-the-new-css-reset\/","url_meta":{"origin":243882,"position":4},"title":"An Interview With Elad Shechter on “The New CSS Reset”","author":"Elad Shechter","date":"October 19, 2021","format":false,"excerpt":"Hey folks! Elad reached out to me to show me his new CSS reset project called the-new-css-reset. It\u2019s quite interesting! I thought a neat way to share it with you is not only to point you toward it, but to ask Elad some questions about it for your reading pleasure.\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/elad-shechter.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/elad-shechter.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/elad-shechter.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/elad-shechter.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/elad-shechter.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":336986,"url":"https:\/\/css-tricks.com\/tools-for-auditing-css\/","url_meta":{"origin":243882,"position":5},"title":"Tools for Auditing CSS","author":"Silvestar Bistrovi\u0107","date":"March 29, 2021","format":false,"excerpt":"Auditing CSS is not a common task in a developer\u2019s everyday life, but sometimes you just have to do it. Maybe it\u2019s part of a performance review to identify critical CSS and reduce unused selectors. Perhaps is part of effort to improve accessibility where all the colors used in the\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/css-audit-tools.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/css-audit-tools.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/css-audit-tools.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/css-audit-tools.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/css-audit-tools.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/243882","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=243882"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/243882\/revisions"}],"predecessor-version":[{"id":300013,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/243882\/revisions\/300013"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=243882"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=243882"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=243882"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}