Good Vibes Only is owned by me, Jessica, and I work as a freelance front-end developer. I write about things I’ve experimented with and thoughts I like to share, focusing on creativity and CSS.
I have a love for CSS because it’s what makes the web look interesting and fun!
Happy birthday to Good Vibes Only!
Five years ago, I started my adventure as a freelance frontend developer choosing curiosity, drive and creativity over fear. Looking back, I’m incredibly proud of that choice.
It’s been quite a ride so far full of learning, challenges and inspiring people along the way. And honestly? I feel like I’m just getting started.
We’ve gotten so many new CSS selectors lately that almost feel like magic, but with magic comes confusion. Sometimes it’s surprisingly hard to see the difference between two selectors that look almost identical. Do you know the difference between :has(:not(…)) and :not(:has(…))? A small hint: they are definitely not the same thing if you look at it more closely.
section:has(:not(img)) {
}
section:not(:has(img)) {
}At first glance, they look similar. But if we rewrite them slightly, the difference becomes clearer:
section:has(*:not(img)) {
}
section:not(section:has(img)) {
}Now the logic starts to unfold. section:has(:not(img)) selects a section that contains anything that is not an img. On the other hand, section:not(:has(img)) selects a section only if it doesn’t contain an img at all. Same words. Different order. Completely different meaning.
For a CSS nerd like me, this was such a satisfying little aha! moment. I love when something that looks confusing at first suddenly clicks — and you realize CSS is just being very, very precise.