If you’re looking for a primer on CSS specificity, we’ve got that<\/a>. And if you’re trying to get ahead of the game, you should be aware of CSS Cascade Layers<\/a> as well.<\/p>\n\n\n\n\n\n\n\n

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

One of the ways to help get a grasp of CSS specificity is thinking terms of “what beats what” or how strong the specificity is. Manuel Matuzovic has a helpful interactive step-by-step demo<\/a>. You keep clicking the “Add selector” button, and the CSS shown (and applied to the page) changes with ever-increasingly-strong selectors applied to the body that change the background-color<\/code>. At the end, it veers into not-really-selectors trickery, like using @keyframes<\/code> to override things.<\/p>\n\n\n

More specificity practice<\/h3>\n\n\n

If you enjoyed the trickery at the end, check out Francisco Dias’ A Specificity Battle!<\/a>, an article we published a few years back that does a back-and-forth styling battle with nineteen<\/em> steps “selecting” the same element to re-style it. CSS is cray sometimes.<\/p>\n","protected":false},"excerpt":{"rendered":"

If you’re looking for a primer on CSS specificity, we’ve got that. And if you’re trying to get ahead of […]<\/p>\n","protected":false},"author":3,"featured_media":280414,"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":"Props to @mmatuzo for putting this interactive demo on specificity together.","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"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":[17],"tags":[1380],"class_list":["post-364152","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-links","tag-specificity"],"acf":{"link_source":"","link_url":"","link_icon":null,"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/css-audit-specificity-graph.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":236005,"url":"https:\/\/css-tricks.com\/a-specificity-battle\/","url_meta":{"origin":364152,"position":0},"title":"A Specificity Battle! (and other trickery)","author":"Francisco Dias","date":"January 11, 2016","format":false,"excerpt":"The following is a guest adventure by Francisco Dias from HubSpot. I saw Francisco and Cris Necochea give this as a quick, fun presentation at the Show & Tell at CSS Dev Conf this year. He graciously agreed to prepare it for a blog post! 19 ways to override a\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":237078,"url":"https:\/\/css-tricks.com\/css-specificity-is-base-infinite\/","url_meta":{"origin":364152,"position":1},"title":"CSS Specificity is Base-Infinite","author":"Chris Coyier","date":"January 20, 2016","format":false,"excerpt":"There is a good amount of information on this site about specificity. The seminal one is Specifics on CSS Specificity, which has been updated a few times over the years. When it was originally published in 2008, it presented the information in a bit of a misleading way. It has\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":343613,"url":"https:\/\/css-tricks.com\/using-the-specificity-of-where-as-a-css-reset\/","url_meta":{"origin":364152,"position":2},"title":"Using the Specificity of :where() as a CSS Reset","author":"Mojtaba Seyedi","date":"July 12, 2021","format":false,"excerpt":"I don\u2019t know about you, but I write these three declarations many times in my CSS: ul { padding: 0; margin: 0; list-style-type: none; } You might yell at me and say I can just put those in my CSS resets. I wish I could, but I don\u2018t want to\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\/06\/where-specificity.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\/06\/where-specificity.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/where-specificity.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/where-specificity.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/where-specificity.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":153686,"url":"https:\/\/css-tricks.com\/css-specificity-chart\/","url_meta":{"origin":364152,"position":3},"title":"CSS Specificity Chart","author":"Chris Coyier","date":"October 22, 2013","format":false,"excerpt":"If you're going to learn about CSS specificity, it might as well be with The Shining, right? (Or fish, or Star Wars.)","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":210531,"url":"https:\/\/css-tricks.com\/do-we-actually-need-specificity-in-css\/","url_meta":{"origin":364152,"position":4},"title":"Do We Actually Need Specificity In CSS?","author":"Chris Coyier","date":"November 4, 2015","format":false,"excerpt":"Philip Walton: While it\u2019s not possible to simply instruct the browser to ignore specificity altogether, it is possible to prevent specificity from affecting the cascade for a particular CSS file or set of CSS files. How? The answer is to make specificity and source order the same. Imagine a stylesheet\u2026","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":293075,"url":"https:\/\/css-tricks.com\/how-much-specificity-do-rules-have-like-keyframes-and-media\/","url_meta":{"origin":364152,"position":5},"title":"How much specificity do @rules have, like @keyframes and @media?","author":"Chris Coyier","date":"July 30, 2019","format":false,"excerpt":"I got this question the other day. My first thought is: weird question! Specificity is about selectors, and at-rules are not selectors, so... irrelevant? To prove that, we can use the same selector inside and outside of an at-rule and see if it seems to affect specificity. body { background:\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\/04\/rabbit-in-a-hat.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\/04\/rabbit-in-a-hat.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/rabbit-in-a-hat.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/rabbit-in-a-hat.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/rabbit-in-a-hat.png?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\/364152","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=364152"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/364152\/revisions"}],"predecessor-version":[{"id":364164,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/364152\/revisions\/364164"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/280414"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=364152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=364152"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=364152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}