Tempted to use something like “1800number_box” for a ID? Don’t. Because it won’t work. Class identifiers are allowed to start with a number, but ID identifiers are not.<\/p>\n
That is all.<\/p>\n
If you have already existing HTML using it that way that you absolutely can’t change, you can access it with:<\/p>\n
[id='1800number_box'] {\r\n \/* does work *\/\r\n}\r\n\r\n#1800number_box {\r\n \/* doesn't work *\/\r\n}\r\n\r\n\/* Or, you can \"escape\" the number, which looks funky but works: *\/\r\n#\\31 800number_box {\r\n \/* does work *\/\r\n}\r\n\/* See: http:\/\/mothereff.in\/css-escapes *\/<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"Tempted to use something like “1800number_box” for a ID? Don’t. Because it won’t work. Class identifiers are allowed to start […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","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-28","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":187526,"url":"https:\/\/css-tricks.com\/svg-fragment-identifiers-work\/","url_meta":{"origin":28,"position":0},"title":"How SVG Fragment Identifiers Work","author":"Chris Coyier","date":"November 3, 2014","format":false,"excerpt":"I've talked a good bit about SVG's around here and using it to build an icon system. The beauty of is that you can reference just a part of some SVG defined elsewhere and draw just that part somewhere else. That ability allows you to build a whole system out\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":382234,"url":"https:\/\/css-tricks.com\/working-with-multiple-css-anchors-and-popovers-inside-the-wordpress-loop\/","url_meta":{"origin":28,"position":1},"title":"Working With Multiple CSS Anchors and Popovers Inside the WordPress Loop","author":"Geoff Graham","date":"February 19, 2025","format":false,"excerpt":"I know, super niche, but it could be any loop, really. The challenge is having multiple tooltips on the same page that make use of the Popover API for toggling goodness and CSS Anchor Positioning for attaching a tooltip to its respective anchor element.","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\/2024\/11\/anchors-bubbles.jpeg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/11\/anchors-bubbles.jpeg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/11\/anchors-bubbles.jpeg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/11\/anchors-bubbles.jpeg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/11\/anchors-bubbles.jpeg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":13386,"url":"https:\/\/css-tricks.com\/cssfrag\/","url_meta":{"origin":28,"position":2},"title":"CSSFrag","author":"Chris Coyier","date":"July 25, 2011","format":false,"excerpt":"Shaun Inman with a Safari extension (and Firefox port) that impliments the (not real) fragment identifiers proposal. Essentially: same-page document links that don't need the ID\/hash-tag thing. Alternatively, you target with a CSS selector: http:\/\/example.com\/lorem.html#css(.content:nth-child(2))","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":384665,"url":"https:\/\/css-tricks.com\/toe-dipping-into-view-transitions\/","url_meta":{"origin":28,"position":3},"title":"Toe Dipping Into View Transitions","author":"Geoff Graham","date":"February 21, 2025","format":false,"excerpt":"The View Transitions API is more a set of features than it is about any one particular thing. And it gets complex fast. But in this post, we\u2019ll cover a couple ways to dip your toes into the waters without having to dive in head-first.","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\/css-tricks-logo-gradient-outline.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\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":19277,"url":"https:\/\/css-tricks.com\/bad-code-dogmatism-etc\/","url_meta":{"origin":28,"position":4},"title":"“Bad Code”, Dogmatism, etc.","author":"Chris Coyier","date":"November 27, 2012","format":false,"excerpt":"A wrapup of some recent discussion in the community about the use of classes, descendant selectors, whether using IDs is bad or not, how that relates to OOCSS, and all that jazz.","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":345756,"url":"https:\/\/css-tricks.com\/css-modules-the-native-ones\/","url_meta":{"origin":28,"position":5},"title":"CSS Modules (The Native Ones)","author":"Chris Coyier","date":"August 2, 2021","format":false,"excerpt":"They are actually called \"CSS Module Scripts\" and are a native browser feature, as opposed to the popular open-source project that essentially does scoped styles by creating unique class name identifiers in both HTML and CSS. Native CSS Modules are a part of ES Modules (a lot like JSON modules\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\/08\/css-modules-connections.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\/08\/css-modules-connections.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/css-modules-connections.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/css-modules-connections.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/css-modules-connections.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\/28","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=28"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/28\/revisions"}],"predecessor-version":[{"id":176587,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/28\/revisions\/176587"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=28"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=28"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=28"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}