{"id":273,"date":"2023-12-17T18:16:46","date_gmt":"2023-12-17T18:16:46","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=273"},"modified":"2023-12-17T18:16:59","modified_gmt":"2023-12-17T18:16:59","slug":"date-based-styles-with-has","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/date-based-styles-with-has\/","title":{"rendered":"Date-based styles with :has()"},"content":{"rendered":"\n<p>We just looked at how <a href=\"https:\/\/frontendmasters.com\/blog\/quantity-queries-are-very-easy-with-css-has\/\"><code>:has()<\/code> in CSS makes quantity queries so easy<\/a>, so this post by Terence Eden caught my eye, showing some trickery where you can style an entire page based on when it was published. That is, if there is something like a <code>&lt;time><\/code> or <code>&lt;meta><\/code> tag that has this information on the page. For example:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">time<\/span> <span class=\"hljs-attr\">datetime<\/span>=<span class=\"hljs-string\">\"2017-01-05\"<\/span>&gt;<\/span>...<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Now you can look for that and style the whole page.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">body<\/span><span class=\"hljs-selector-pseudo\">:has(<\/span><span class=\"hljs-selector-attr\">&#91;datetime|=<span class=\"hljs-string\">\"2017\"<\/span>]<\/span> )  {\n  <span class=\"hljs-comment\">\/* Style page based on this year. *\/<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Fun. You don&#8217;t see that <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Attribute_selectors#attrvalue_3\">&#8220;dash separated attribute selector&#8221;<\/a> every day.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We just looked at how :has() in CSS makes quantity queries so easy, so this post by Terence Eden caught my eye, showing some trickery where you can style an entire page based on when it was published. That is, if there is something like a &lt;time> or &lt;meta> tag that has this information on [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":274,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[29],"tags":[40,7,46],"class_list":["post-273","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-beat","tag-has","tag-css","tag-date-time"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2023\/12\/old-thumb.jpg?fit=1000%2C500&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/273","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=273"}],"version-history":[{"count":1,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/273\/revisions"}],"predecessor-version":[{"id":275,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/273\/revisions\/275"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/274"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}