According to the spec, one ID should be infinitely more specific than a class. But as it turns out, if you add 256 classes to a single element (same or different) it will override the ID. Dumb little edge case that probably will never be fixed, but interesting. Ryan Seddon digs in a little more. <\/p>\n","protected":false},"excerpt":{"rendered":"
According to the spec, one ID should be infinitely more specific than a class. But as it turns out, if you add 256 classes to a single element (same or different) it will override the ID. Dumb little edge case that probably will never be fixed, but interesting. Ryan Seddon digs in a little more.<\/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":[17],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":246369,"url":"https:\/\/css-tricks.com\/add-id-to-body\/","url_meta":{"origin":17764,"position":0},"title":"Lots of ways to add an ID to the `body` element","date":"October 11, 2016","format":false,"excerpt":"The following is a guest post by Trishah Woolley. Over the years, Trishah has collected a ton of code snippets that do the job of adding IDs and classes based on some variable information, like the URL or data from WordPress. Each of these snippets were either collected from documentation\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":818,"url":"https:\/\/css-tricks.com\/the-difference-between-id-and-class\/","url_meta":{"origin":17764,"position":1},"title":"The Difference Between ID and Class","date":"July 9, 2008","format":false,"excerpt":"We need ways to describe content in an HTML\/XHTML document. The basic elements like h1, p, and ul will often do the job, but our basic set of tags doesn't cover every possible type of page element or layout choice. For this we need ID's and classes.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2008\/07\/id-and-class.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":5690,"url":"https:\/\/css-tricks.com\/multiple-class-id-selectors\/","url_meta":{"origin":17764,"position":2},"title":"Multiple Class \/ ID and Class Selectors","date":"February 22, 2010","format":false,"excerpt":"Can you spot the difference between these two selectors? #header.callout { } #header .callout { } They look nearly identical, but the top one has no space between #header and .callout while the bottom one does. This small difference makes a huge difference in what it does. To some of\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":8225,"url":"https:\/\/css-tricks.com\/why-use-classes-or-ids-on-the-html-element\/","url_meta":{"origin":17764,"position":3},"title":"Why use Classes or IDs on the HTML element?","date":"January 2, 2011","format":false,"excerpt":"Reader Nicolas writes in: I'm frequently seeing ID and class specifications to and elements. I'm curious as to why one would do this? If it is unique to either element, then why not specify body or html in the CSS? I believe what Nicolas is asking is why would you\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/01\/Multiple-HTML.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":8308,"url":"https:\/\/css-tricks.com\/rotating-feature-boxes\/","url_meta":{"origin":17764,"position":4},"title":"Rotating Feature Boxes","date":"January 17, 2011","format":false,"excerpt":"Three boxes: a main feature box and two sub features. Click on the sub feature boxes and the whole shebang rotates to make that the main feature. The animations happen via CSS3 (the future) and the clicks and class shuffling is done by JavaScript (its forte).","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":8439,"url":"https:\/\/css-tricks.com\/webkit-sibling-bug\/","url_meta":{"origin":17764,"position":5},"title":"WebKit Adjacent\/General Sibling & Pseudo Class Bug","date":"February 4, 2011","format":false,"excerpt":"Good news everyone! This is fixed in both stable releases of the WebKit browser Safari (5.1) and Chrome (13) It's not every day you come across a solid bug in WebKit, which it seems to me leads the pack in quality support of CSS. Alexander Futekov emailed to let me\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/17764"}],"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=17764"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/17764\/revisions"}],"predecessor-version":[{"id":17769,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/17764\/revisions\/17769"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=17764"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=17764"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=17764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}