Frontend Masters Boost RSS Feed https://frontendmasters.com/blog Helping Your Journey to Senior Developer Sun, 17 Dec 2023 18:16:59 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.2 225069128 Date-based styles with :has() https://frontendmasters.com/blog/date-based-styles-with-has/ https://frontendmasters.com/blog/date-based-styles-with-has/#respond Sun, 17 Dec 2023 18:16:46 +0000 https://frontendmasters.com/blog/?p=273 or <meta> tag that has this information on […]]]> 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">...

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

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

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

]]> https://frontendmasters.com/blog/date-based-styles-with-has/feed/ 0 273