<\/p>\n
How it’s done<\/h3>\n
Simple, literally just apply the ID to the body tag:<\/p>\n
...\r\n<\/head>\r\n\r\n<body id=\"contact-page\">\r\n ...<\/code><\/pre>\nNow for our example of making all links on the contact page red instead of blue, just use some CSS like this:<\/p>\n
a { \r\ncolor: blue; \r\n}\r\n\r\n#contact-page a {\r\n color: red;\r\n}<\/code><\/pre>\n <\/p>\n
How about a more practical example?<\/h3>\n
You got it. One of the most useful implementations of this technique is within navigation<\/strong>. Take a look at this sample navigation:<\/p>\n
<\/p>\n
See how the forums tab is the “active” tab? Certainly that’s just a slight change in CSS, probably just a shift in the position of a background image. Perhaps the XHTML looks something like this:<\/p>\n
...\r\n<li><a href=\"\/fieldtips\">Field tips<\/a><\/li>\r\n<li class=\"active\"><a href=\"\/forums\">Forums<\/a><\/li>\r\n...<\/code><\/pre>\nThe “active” class applied to the list item is what shifts the background image. That’ll do the trick, but what about when we move to the Field Tips page? We will have to remove the active class from the forums tab and apply it to the the Field Tips tab. That’s not very convenient. That means the code for the navigation block is unique on every single page of the site. So let’s say down the road we want to add a Contact tab, we’ll have to alter the code on every single page. No fun.<\/p>\n
Let’s do this a little smarter. First we don’t want to include the navigation block of code on every page, we want to include<\/span> it, probably with a simple PHP include like this:<\/p>\n<?php include_once(\"nav.html\"); ?><\/code><\/pre>\n <\/p>\n
But then how do we apply the “active” class to the current navigation list element?<\/h3>\n
This is where apply what we just learned about giving unique ID’s to the body!<\/strong> Instead of applying a class to only the active list element, let’s apply a unique class to each separate list item as well as give our body an unique ID.<\/p>\n ...\r\n<\/head>\r\n\r\n<body id=\"field-tips\">\r\n ...\r\n <li class=\"fieldtips\"><a href=\"\/fieldtips\">Field tips<\/a><\/li>\r\n <li class=\"forums\"><a href=\"\/forums\">Forums<\/a><\/li>\r\n ...<\/code><\/pre>\nNow we can target specific elements in the navigation with some clever CSS:<\/p>\n
#field-tips li.fieldtips, #forums li.forums {\r\n background-position: bottom;\r\n}<\/code><\/pre>\nThis means that the code for the navigation block can stay the same on every page<\/strong>, yet only the navigation element native to that page will be affected by this CSS and “flip” to the active state.<\/p>\n <\/p>\n
Let’s get even more dynamic<\/h3>\n
Reader Brian left an awesome comment<\/a> on how you can use PHP to apply the unique ID to to the body element:<\/p>\n<body id=\"<?= basename($_SERVER['PHP_SELF'], \".php\")?>\"><\/code><\/pre>\nThis will return the name of the PHP file being executed as the ID (e.g. body id=”index.php”). To leave off the .php part, just remove the “.php” part.<\/p>\n
More info on basename<\/strong><\/a>. More info on $_SERVER<\/strong><\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"Let’s say you want to change the color of your links on just your contact page to red. They are blue on every other page, but it just makes sense for them to be red on your contact page (for some reason). There are a couple ways you could go about this. You could declare […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","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":302263,"url":"https:\/\/css-tricks.com\/what-does-revert-do-in-css\/","url_meta":{"origin":265,"position":0},"title":"What does “revert” do in CSS?","date":"January 27, 2020","format":false,"excerpt":"Miriam\u00a0Suzanne explains in a Mozilla Developer video on the subject. The revert value in CSS \"resets\" a property back to it's inherited value, only going as far back as the UA stylesheet. That's critical, as it won't reset a
to inline, for example, because a
is a block-level\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/higher-order-components.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1079,"url":"https:\/\/css-tricks.com\/links-of-interest-50\/","url_meta":{"origin":265,"position":1},"title":"Links of Interest","date":"September 30, 2008","format":false,"excerpt":"Browser Differences I Can Live With For a beautiful web has a nice article on acceptable cross-browser differences. Essentially, progressive enhancement typography stuff and then things like border-radius. I completely agree. I guess that answers this question. \u00a0 Feed IE6 With a Basic Stylesheet A lot of times when you\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":304728,"url":"https:\/\/css-tricks.com\/use-avisited-in-your-css-stylesheet\/","url_meta":{"origin":265,"position":2},"title":"Use a:visited in your CSS stylesheet","date":"March 9, 2020","format":false,"excerpt":"Evert Pot: Unfortunately, when setting a new color (e.g. a { color: #44F }) the \u2018purple visited link\u2019 feature also gets disabled. I think this is a shame, as there\u2019s so many instances where you\u2019re going through a list of links and want to see what you\u2019ve seen before.The 2\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/link-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":324353,"url":"https:\/\/css-tricks.com\/getting-the-wordpress-block-editor-to-look-like-the-front-end-design\/","url_meta":{"origin":265,"position":3},"title":"Getting the WordPress Block Editor to Look Like the Front End Design","date":"November 4, 2020","format":false,"excerpt":"I'm a WordPress user and, if you're anything like me, you always have two tabs open when you edit a post: one with the new fancy pants block editor, aka Gutenberg, and another with a preview of the post so you know it won't look wonky on the front end.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/wp-editor-dev-tools.jpg?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":265,"position":4},"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":278596,"url":"https:\/\/css-tricks.com\/the-c-in-css-the-cascade\/","url_meta":{"origin":265,"position":5},"title":"The “C” in CSS: The Cascade","date":"November 13, 2018","format":false,"excerpt":"Following up from Geoff\u2019s intro article on The Second \"S\" in CSS, let\u2019s now move the spotlight to the \"C\" in CSS \u2014 what we call the Cascade. It\u2019s where things start to get messy, and even confusing at times. Have you ever written a CSS property and the value\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/cascade-bubbles.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\/265"}],"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=265"}],"version-history":[{"count":0,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/265\/revisions"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=265"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=265"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}