A Previous Sibling Selector

Jim Nielsen set out to style a bunch of links that appeared before hr elements. As the element tree – generated from a Markdown file – was entirely flat, there are no enclosing section elements to hook onto in order to select those links (using something like section p:last-child a:only-child). The solution? The :has() selector: …

Complex vs Compound Selectors

Good post by Miriam Suzanne In CSS, there are compound selectors and also complex selectors, and I never remember which is which. Do you need to learn the difference? Probably not. But I’m tired of looking it up. Don’t tell anyone but this is the reason why many of us blog: to remember things 😉 …

Fun CSS-only scrolling effects for Matterday

In this post, Lynn Fisher walks us through the parallax scrolling CSS effects featured on the Matterday project. Does not use Scroll-Linked Animations (which is undergoing a spec rewrite) but transform hacks that rely on translateZ() to create a stack and scale() to correct the size again. Fun CSS-only scrolling effects for Matterday →

The CSS Cascade: A Deep Dive (2022.06.09 @ CSS Day)

On June 9 & 10, I was in Amsterdam for CSS Day – a conference I’ve been attending since it’s very first edition in 2013. This time – after a two year hiatus due to youknowwhat – I was very glad to be back! This time not as an attendee though, but as a speaker. …

CSS: Select first x items

Because I keep forgetting this, an entry on the blog so that my future self can find it back easily: CSS: Want your first 5 list items to be bold? li:nth-of-type(-n + 5) {font-weight: bold;} Start with the # of list items you want to impact, then increment backward with -n. — Estelle Weyl (@estellevw) …

Re-evaluating technology

Jeremy underlines importance of revisiting past decisions: In recent years in particular it feels like the web has come on in leaps and bounds: service workers, native JavaScript APIs, and an astonishing boost in what you can do with CSS. Most important of all, the interoperability between browsers is getting better and better. Universal support …

Star Wars Scene Transition Effects in CSS

You know those wipe transitions between scenes in Star Wars movies? Have you ever thought it would be awesome to recreate them with CSS? Probably not, but, well, here we are. Let’s do it. Uses gradients set as a mask-image which transition on hover. For the iris and clock wipte effects, @property is used. Star …

Obi-Wan Kenobi on Disney+

Looking forward to this one: The story begins 10 years after the dramatic events of “Star Wars: Revenge of the Sith” where Obi-Wan Kenobi faced his greatest defeat—the downfall and corruption of his best friend and Jedi apprentice, Anakin Skywalker, who turned to the dark side as evil Sith Lord Darth Vader. Airing starts next …