{"id":293075,"date":"2019-07-30T15:58:11","date_gmt":"2019-07-30T22:58:11","guid":{"rendered":"https:\/\/css-tricks.com\/?p=293075"},"modified":"2019-07-30T15:58:11","modified_gmt":"2019-07-30T22:58:11","slug":"how-much-specificity-do-rules-have-like-keyframes-and-media","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/how-much-specificity-do-rules-have-like-keyframes-and-media\/","title":{"rendered":"How much specificity do @rules have, like @keyframes and @media?"},"content":{"rendered":"

I got this question the other day. My first thought is: weird question!<\/em> Specificity is about selectors, and at-rules are not selectors, so… irrelevant?<\/p>\n

To prove that, we can use the same selector inside and outside of an at-rule and see if it seems to affect specificity.<\/p>\n

<\/p>\n

body {\r\n  background: red;\r\n}\r\n@media (min-width: 1px) {\r\n  body {\r\n    background: black;\r\n  }\r\n}<\/code><\/pre>\n
The background is black. But… is that because the media query increases the specificity? Let’s switch them around.<\/p>\n
@media (min-width: 1px) {\r\n  body {\r\n    background: black;\r\n  }\r\n}\r\nbody {\r\n  background: red;\r\n}<\/code><\/pre>\n
The background is red, so nope. The red background wins here just because it is later in the stylesheet. The media query does not affect specificity. <\/p>\n
If it feels like selectors are increasing specificity and overriding other styles with the same selector, it’s likely just because it comes later in the stylesheet.<\/p>\n
Still, the @keyframes<\/code> in the original question got me thinking. Keyframes, of course, can influence styles. Not specificity, but it can feel<\/em> like specificity if the styles end up overridden. <\/p>\n
See this tiny example<\/a>:<\/p>\n
@keyframes winner {\r\n  100% { background: green; }\r\n}\r\nbody {\r\n  background: red !important;\r\n  animation: winner forwards;\r\n}<\/code><\/pre>\n
You’d think the background would be red, especially with the !important<\/code> rule there. (By the way, !important<\/code> doesn’t affect specificity; it’s a per-rule thing.) It is red in Firefox, but it’s green in Chrome. So that’s a funky thing to watch out for. (It’s been a bug since at least 2014 according to Estelle Weyl.)<\/p>\n","protected":false},"excerpt":{"rendered":"
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.<\/p>\n","protected":false},"author":3,"featured_media":286594,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_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,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"How much specificity do @rules have, like @keyframes and @media?","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1507,1380],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/rabbit-in-a-hat.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":346355,"url":"https:\/\/css-tricks.com\/css-nesting-specificity-and-you\/","url_meta":{"origin":293075,"position":0},"title":"CSS Nesting, specificity, and you","date":"August 10, 2021","format":false,"excerpt":"Here\u2019s Kilian Valkhof on CSS nesting which isn't available in browsers yet, but will be soon. There are a few differences he notes between CSS nesting and nesting in Sass or Less though. Take, for example, the following code: div { background: #fff; & p { color: red; } border:\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/css-nesting.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":364152,"url":"https:\/\/css-tricks.com\/manuel-matuzovics-css-specificity-demo\/","url_meta":{"origin":293075,"position":1},"title":"Manuel Matuzovic’s CSS Specificity Demo","date":"February 25, 2022","format":false,"excerpt":"If you're looking for a primer on CSS specificity, we've got that. And if you're trying to get ahead of the game, you should be aware of CSS Cascade Layers as well. One of the ways to help get a grasp of CSS specificity is thinking terms of \"what beats\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/css-audit-specificity-graph.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":9462,"url":"https:\/\/css-tricks.com\/when-using-important-is-the-right-choice\/","url_meta":{"origin":293075,"position":2},"title":"When Using !important is The Right Choice","date":"May 22, 2011","format":false,"excerpt":"Using !important rules can be a dangerous road to start going down, but they exist for a reason. There are some good use cases which we'll cover here.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":192577,"url":"https:\/\/css-tricks.com\/strategies-keeping-css-specificity-low\/","url_meta":{"origin":293075,"position":3},"title":"Strategies for Keeping CSS Specificity Low","date":"January 12, 2015","format":false,"excerpt":"Keeping CSS specificity low across all the selectors in your project is a worthy goal. It's generally a sign that things are in relative harmony. You aren't fighting against yourself and you have plenty of room to override styles when you need to. Specificity on selectors tends to creep up\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":236005,"url":"https:\/\/css-tricks.com\/a-specificity-battle\/","url_meta":{"origin":293075,"position":4},"title":"A Specificity Battle! (and other trickery)","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 "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":264665,"url":"https:\/\/css-tricks.com\/latest-ways-deal-cascade-inheritance-specificity\/","url_meta":{"origin":293075,"position":5},"title":"The latest ways to deal with the cascade, inheritance and specificity","date":"January 10, 2018","format":false,"excerpt":"The cascade is such an intrinsic part of CSS that they put it right there in the name. If you\u2019ve ever needed to use !important to affect specificity in the cascade, you\u2019ll know that it can be a tricky thing to deal with. In the early days of CSS, it\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/rabbit-in-a-hat.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/293075"}],"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=293075"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/293075\/revisions"}],"predecessor-version":[{"id":293140,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/293075\/revisions\/293140"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/286594"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=293075"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=293075"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=293075"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}