Clever use of attribute selectors and the :has selector.
Unfortunately as the article talks about, not every website stores the published date in the same way, so you can't write a generic CSS rule to add increasing levels of sepia to all sites.
Another great use of attribute selectors is to work around mangled CSS names when you're injecting your own CSS into other people's site.
Since so many sites use CSS modules, you'll see classnames like "post_s47mgk". The suffix changing dynamically as they deploy their site randomly.
You can do [class^="post_"] to select that class and it'll remain stable even if the mangler changes the suffix.
jamesfinlayson 3 days ago [-]
Neat - I thought my CSS knowledge was pretty okay but [attr|=value] was new to me.
Incidentally, I remember a guy that I worked with years ago telling me that he'd worked on a news website (probably in the late 1990s or early 2000s) and had always wanted to do something like this (have the background be a more faded yellow the older the article was).
3 days ago [-]
Rendered at 18:44:31 GMT+0000 (Coordinated Universal Time) with Vercel.
Unfortunately as the article talks about, not every website stores the published date in the same way, so you can't write a generic CSS rule to add increasing levels of sepia to all sites.
Another great use of attribute selectors is to work around mangled CSS names when you're injecting your own CSS into other people's site.
Since so many sites use CSS modules, you'll see classnames like "post_s47mgk". The suffix changing dynamically as they deploy their site randomly.
You can do [class^="post_"] to select that class and it'll remain stable even if the mangler changes the suffix.
Incidentally, I remember a guy that I worked with years ago telling me that he'd worked on a news website (probably in the late 1990s or early 2000s) and had always wanted to do something like this (have the background be a more faded yellow the older the article was).