Date-based styles with :has()

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 <time> or <meta> tag that has this information on the page. For example:

<time datetime="2017-01-05">...Code language: HTML, XML (xml)

Now you can look for that and style the whole page.

body:has([datetime|="2017"] )  {
  /* Style page based on this year. */
}Code language: CSS (css)

Fun. You don’t see that “dash separated attribute selector” every day.