{"id":189,"date":"2014-12-04T09:55:57","date_gmt":"2014-12-04T09:55:57","guid":{"rendered":"http:\/\/www.sircodex.com\/?p=189"},"modified":"2014-12-04T09:55:57","modified_gmt":"2014-12-04T09:55:57","slug":"how-to-put-your-css3-on-target","status":"publish","type":"post","link":"https:\/\/www.sircodex.com\/how-to-put-your-css3-on-target\/","title":{"rendered":"How to Put Your CSS3 on :target"},"content":{"rendered":"

CSS pseudo-classes which change styles in response to user actions have been with us for many years. You\u2019ve almost certainly used :hover, :active and :focus; I can (only just)<\/em> remember the excitement of changing IE4\u2019s link colors back in 1997.<\/p>\n

CSS3 also introduced :target; a powerful pseudo-class which can reduce the need for scripting in interactive widgets. Consider a page URL such as http:\/\/mysite.com\/page#mytarget<\/strong>; an element with the id \u201cmytarget\u201d can have matching :target styles applied.<\/p>\n

:target Browser Support<\/h2>\n

All modern browsers support :target and you won\u2019t experience problems with IE9 or most versions of Chrome, Firefox, Safari and Opera. Unfortunately, that still leaves us with the older versions of IE. I wouldn\u2019t worry too much about IE6 and 7, but IE8 remains the world\u2019s most used browser version<\/a>. All is not lost, however, since shims such as selectivizr<\/a> can add :target support without requiring complex workarounds.<\/p>\n

A Simple Document :target<\/h2>\n

We\u2019ve recently been discussing website contracts. Generic contract small print such as payment schedules, hosting conditions, cancellation terms, support policies, glossaries etc. could be contained in one or more web pages. The document could grow to a considerable length even if you try and keep it concise!<\/p>\n

Let\u2019s look at a snippet of the document\u2019s HTML5 in contract.html<\/em>:<\/p>\n

\r\n<h1>Website Contract<\/h1>\r\n\r\n<nav>\r\n\t<ul>\r\n\t\t<li><a href=\"#payment\">Payment Schedule<\/a><\/li>\r\n\t\t<li><a href=\"#support\">Support &amp; Maintenance<\/a><\/li>\r\n\t\t<li><a href=\"#hosting\">Hosting Terms<\/a><\/li>\r\n\t\t<li><a href=\"#glossary\">Glossary<\/a><\/li>\r\n\t<\/ul>\r\n<\/nav>\r\n\r\n<article id=\"payment\">\r\n<h2>Payment Schedule<\/h2>\r\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/p>\r\n<\/article>\r\n\r\n<article id=\"support\">\r\n<h2>Support &amp; Maintenance<\/h2>\r\n<p>Ut euismod tempor porttitor.<\/p>\r\n<\/article>\r\n\r\n<article id=\"hosting\">\r\n<h2>Hosting Terms<\/h2>\r\n<p>Suspendisse ac nisl lorem, ut fermentum erat.<\/p>\r\n<\/article>\r\n\r\n<article id=\"glossary\">\r\n<h2>Glossary<\/h2>\r\n<p>Aenean id nibh eget nisl blandit hendrerit lobortis ac tortor.<\/p>\r\n<\/article>\r\n<\/code><\/pre>\n
We can use the :target attribute to highlight active sections, e.g.<\/p>\n
\r\narticle:target\r\n{\r\n\tbackground-color: #ffc;\r\n\tborder: 2px solid #fcc;\r\n}\r\n<\/code><\/pre>\n
Anyone viewing the contract<\/strong> can click a navigation menu item to highlight the appropriate section. You can also issue direct links to clients who require specific information, e.g. contract.html#support<\/strong>.<\/p>\n
The :target selector offers further versatility \u2014 it\u2019s possible to create dynamic effects in HTML5 and CSS without using JavaScript.<\/p>\n
 <\/p>\n
Source Link: http:\/\/www.sitepoint.com\/css3-target-selector\/<\/p>\n","protected":false},"excerpt":{"rendered":"
CSS pseudo-classes which change styles in response to user actions have been with us for many years. You\u2019ve almost certainly used :hover, :active and :focus; I can (only just) remember the excitement of changing IE4\u2019s link colors back in 1997. CSS3 also introduced :target; a powerful pseudo-class which can reduce the need for scripting in […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[7],"tags":[],"class_list":["post-189","post","type-post","status-publish","format-standard","hentry","category-css3"],"aioseo_notices":[],"yoast_head":"\nHow to Put Your CSS3 on :target - Sir Codex<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.sircodex.com\/how-to-put-your-css3-on-target\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Put Your CSS3 on :target - Sir Codex\" \/>\n<meta property=\"og:description\" content=\"CSS pseudo-classes which change styles in response to user actions have been with us for many years. You\u2019ve almost certainly used :hover, :active and :focus; I can (only just) remember the excitement of changing IE4\u2019s link colors back in 1997. CSS3 also introduced :target; a powerful pseudo-class which can reduce the need for scripting in […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.sircodex.com\/how-to-put-your-css3-on-target\/\" \/>\n<meta property=\"og:site_name\" content=\"Sir Codex\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/sircodex\" \/>\n<meta property=\"article:published_time\" content=\"2014-12-04T09:55:57+00:00\" \/>\n<meta name=\"author\" content=\"Sir Codex\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sir Codex\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.sircodex.com\/how-to-put-your-css3-on-target\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.sircodex.com\/how-to-put-your-css3-on-target\/\"},\"author\":{\"name\":\"Sir Codex\",\"@id\":\"https:\/\/www.sircodex.com\/#\/schema\/person\/550a1adc056d25be02d44628e082a185\"},\"headline\":\"How to Put Your CSS3 on :target\",\"datePublished\":\"2014-12-04T09:55:57+00:00\",\"dateModified\":\"2014-12-04T09:55:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.sircodex.com\/how-to-put-your-css3-on-target\/\"},\"wordCount\":300,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.sircodex.com\/#organization\"},\"articleSection\":[\"CSS3\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.sircodex.com\/how-to-put-your-css3-on-target\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.sircodex.com\/how-to-put-your-css3-on-target\/\",\"url\":\"https:\/\/www.sircodex.com\/how-to-put-your-css3-on-target\/\",\"name\":\"How to Put Your CSS3 on :target - Sir Codex\",\"isPartOf\":{\"@id\":\"https:\/\/www.sircodex.com\/#website\"},\"datePublished\":\"2014-12-04T09:55:57+00:00\",\"dateModified\":\"2014-12-04T09:55:57+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.sircodex.com\/how-to-put-your-css3-on-target\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.sircodex.com\/how-to-put-your-css3-on-target\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.sircodex.com\/how-to-put-your-css3-on-target\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.sircodex.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Put Your CSS3 on :target\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.sircodex.com\/#website\",\"url\":\"https:\/\/www.sircodex.com\/\",\"name\":\"Sir Codex\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.sircodex.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.sircodex.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.sircodex.com\/#organization\",\"name\":\"Sir Codex\",\"url\":\"https:\/\/www.sircodex.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.sircodex.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.sircodex.com\/wp-content\/uploads\/2014\/12\/sircodex-logo.png\",\"contentUrl\":\"https:\/\/www.sircodex.com\/wp-content\/uploads\/2014\/12\/sircodex-logo.png\",\"width\":300,\"height\":100,\"caption\":\"Sir Codex\"},\"image\":{\"@id\":\"https:\/\/www.sircodex.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/sircodex\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.sircodex.com\/#\/schema\/person\/550a1adc056d25be02d44628e082a185\",\"name\":\"Sir Codex\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.sircodex.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5a02c801748dce6377c95d052991d753?s=80&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5a02c801748dce6377c95d052991d753?s=80&d=mm&r=g\",\"caption\":\"Sir Codex\"},\"sameAs\":[\"https:\/\/www.sircodex.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Put Your CSS3 on :target - Sir Codex","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.sircodex.com\/how-to-put-your-css3-on-target\/","og_locale":"en_US","og_type":"article","og_title":"How to Put Your CSS3 on :target - Sir Codex","og_description":"CSS pseudo-classes which change styles in response to user actions have been with us for many years. You\u2019ve almost certainly used :hover, :active and :focus; I can (only just) remember the excitement of changing IE4\u2019s link colors back in 1997. CSS3 also introduced :target; a powerful pseudo-class which can reduce the need for scripting in […]","og_url":"https:\/\/www.sircodex.com\/how-to-put-your-css3-on-target\/","og_site_name":"Sir Codex","article_publisher":"https:\/\/www.facebook.com\/sircodex","article_published_time":"2014-12-04T09:55:57+00:00","author":"Sir Codex","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Sir Codex","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.sircodex.com\/how-to-put-your-css3-on-target\/#article","isPartOf":{"@id":"https:\/\/www.sircodex.com\/how-to-put-your-css3-on-target\/"},"author":{"name":"Sir Codex","@id":"https:\/\/www.sircodex.com\/#\/schema\/person\/550a1adc056d25be02d44628e082a185"},"headline":"How to Put Your CSS3 on :target","datePublished":"2014-12-04T09:55:57+00:00","dateModified":"2014-12-04T09:55:57+00:00","mainEntityOfPage":{"@id":"https:\/\/www.sircodex.com\/how-to-put-your-css3-on-target\/"},"wordCount":300,"commentCount":0,"publisher":{"@id":"https:\/\/www.sircodex.com\/#organization"},"articleSection":["CSS3"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.sircodex.com\/how-to-put-your-css3-on-target\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.sircodex.com\/how-to-put-your-css3-on-target\/","url":"https:\/\/www.sircodex.com\/how-to-put-your-css3-on-target\/","name":"How to Put Your CSS3 on :target - Sir Codex","isPartOf":{"@id":"https:\/\/www.sircodex.com\/#website"},"datePublished":"2014-12-04T09:55:57+00:00","dateModified":"2014-12-04T09:55:57+00:00","breadcrumb":{"@id":"https:\/\/www.sircodex.com\/how-to-put-your-css3-on-target\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.sircodex.com\/how-to-put-your-css3-on-target\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.sircodex.com\/how-to-put-your-css3-on-target\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.sircodex.com\/"},{"@type":"ListItem","position":2,"name":"How to Put Your CSS3 on :target"}]},{"@type":"WebSite","@id":"https:\/\/www.sircodex.com\/#website","url":"https:\/\/www.sircodex.com\/","name":"Sir Codex","description":"","publisher":{"@id":"https:\/\/www.sircodex.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.sircodex.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.sircodex.com\/#organization","name":"Sir Codex","url":"https:\/\/www.sircodex.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.sircodex.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.sircodex.com\/wp-content\/uploads\/2014\/12\/sircodex-logo.png","contentUrl":"https:\/\/www.sircodex.com\/wp-content\/uploads\/2014\/12\/sircodex-logo.png","width":300,"height":100,"caption":"Sir Codex"},"image":{"@id":"https:\/\/www.sircodex.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/sircodex"]},{"@type":"Person","@id":"https:\/\/www.sircodex.com\/#\/schema\/person\/550a1adc056d25be02d44628e082a185","name":"Sir Codex","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.sircodex.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5a02c801748dce6377c95d052991d753?s=80&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5a02c801748dce6377c95d052991d753?s=80&d=mm&r=g","caption":"Sir Codex"},"sameAs":["https:\/\/www.sircodex.com"]}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/sircodex.com\/wp-json\/wp\/v2\/posts\/189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sircodex.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sircodex.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sircodex.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sircodex.com\/wp-json\/wp\/v2\/comments?post=189"}],"version-history":[{"count":1,"href":"https:\/\/sircodex.com\/wp-json\/wp\/v2\/posts\/189\/revisions"}],"predecessor-version":[{"id":190,"href":"https:\/\/sircodex.com\/wp-json\/wp\/v2\/posts\/189\/revisions\/190"}],"wp:attachment":[{"href":"https:\/\/sircodex.com\/wp-json\/wp\/v2\/media?parent=189"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sircodex.com\/wp-json\/wp\/v2\/categories?post=189"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sircodex.com\/wp-json\/wp\/v2\/tags?post=189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}