{"id":237078,"date":"2016-01-20T20:39:10","date_gmt":"2016-01-21T03:39:10","guid":{"rendered":"http:\/\/css-tricks.com\/?p=237078"},"modified":"2016-01-20T20:39:10","modified_gmt":"2016-01-21T03:39:10","slug":"css-specificity-is-base-infinite","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-specificity-is-base-infinite\/","title":{"rendered":"CSS Specificity is Base-Infinite"},"content":{"rendered":"

There is a good amount of information on this site about specificity. The seminal one is Specifics on CSS Specificity<\/a>, 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 long since been fixed, but the mistake is still interesting.<\/p>\n

<\/p>\n

The original article showed specificity as an integer, so a selector like #main article.news p:first-child<\/code> would have been listed as 0122<\/code> for the 1 ID, 2 classes, and 2 elements. The mistake? That makes it seem like a base-10 system. Say the specificity value was 0129 – if it was a base-10 system, adding one more element selector would make that 0130 which is definitely not what happens<\/em>.<\/p>\n

Jonathan Snook<\/a> originally corrected me:<\/p>\n

… if you had an element with 11 classes applied to it, it would not outrank an element with a single ID selector.<\/p><\/blockquote>\n

And Eric Meyer<\/a> corroborated<\/a>: <\/p>\n

Specificity is not base-10. It\u2019s not base-anything-familiar: in fact, specificity values have an infinite base<\/strong>.<\/p><\/blockquote>\n

(You can even find a broodling Harry Roberts<\/a> in that comment thread!)<\/p>\n

The trick with writing about specificity is to use commas so it doesn’t look like a single number. 0122<\/code> is better served as 0, 1, 2, 2<\/code>. The diagrams in subsequent updated posts were better:<\/p>\n

You’d probably never actually write a selector like this, as it’s way too obnoxiously specific, but it’s a good demo.<\/figcaption><\/figure>\n

The first digit represents whether an element has an inline style or not, so that’s really just a 0 or a 1, but the rest are theoretically infinite. I guess it would be like this:<\/p>\n

[0 or 1], \u221e, \u221e, \u221e<\/code><\/pre>\n
A number in a higher column can beat any number below. 0, 1, 0, 0<\/code> beats 0, 0, 312, 54659392<\/code>. That right there is why it’s so popular to just never use ID’s<\/a> and keep specificity flat<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 long since been fixed, but […]<\/p>\n","protected":false},"author":3,"featured_media":0,"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":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":339449,"url":"https:\/\/css-tricks.com\/lets-use-x-x-x-x-for-talking-about-specificity\/","url_meta":{"origin":237078,"position":0},"title":"Let\u2019s use (X, X, X, X) for talking about specificity","date":"May 4, 2021","format":false,"excerpt":"I was just chatting with Eric Meyer the other day and I remembered an Eric Meyer story from my formative years. I wrote a blog post about CSS specificity, and Eric took the time to point out the misleading nature of it (I remember scurrying to update it). What was\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2010\/05\/specificity.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":375144,"url":"https:\/\/css-tricks.com\/taming-the-cascade-with-bem-and-modern-css-selectors\/","url_meta":{"origin":237078,"position":1},"title":"Taming the Cascade With BEM and Modern CSS Selectors","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 "Article"","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},"classes":[]},{"id":336871,"url":"https:\/\/css-tricks.com\/where-has-a-cool-specificity-trick-too\/","url_meta":{"origin":237078,"position":2},"title":":where() has a cool specificity trick, too.","date":"March 29, 2021","format":false,"excerpt":"There is a lot of hype on the :is() pseudo-selector lately, probably because now that Safari 14 has it, it's supported across all the major browsers. You've got Miriam tweeting about it, Kevin Powell doing a video, \u0160ime getting it into the Web Platform News, and Robin mentioning it. Bramus\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/is-where-pseudo.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":192577,"url":"https:\/\/css-tricks.com\/strategies-keeping-css-specificity-low\/","url_meta":{"origin":237078,"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":364152,"url":"https:\/\/css-tricks.com\/manuel-matuzovics-css-specificity-demo\/","url_meta":{"origin":237078,"position":4},"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":372576,"url":"https:\/\/css-tricks.com\/using-css-cascade-layers-to-manage-custom-styles-in-a-tailwind-project\/","url_meta":{"origin":237078,"position":5},"title":"Using CSS Cascade Layers to Manage Custom Styles in a Tailwind Project","date":"August 24, 2022","format":false,"excerpt":"If a utility class only does one thing, chances are you don\u2019t want it to be overridden by any styles coming from elsewhere. One approach is to use !important to be 100% certain the style will be applied, regardless of specificity conflicts. The Tailwind config file has an !important option\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/tailwind-layers.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/237078"}],"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=237078"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/237078\/revisions"}],"predecessor-version":[{"id":237082,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/237078\/revisions\/237082"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=237078"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=237078"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=237078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}