I’d like to have a universal pseudo selector in CSS

Last week, I wasted about an hour of my time figuring out why a certain element had different dimensions than the same element elsewhere in the DOM. It had the same CSS and the same defined width and height, but it still rendered differently. Yes, it was box-sizing. Of course it was box-sizing. I immediately realized after looking at it for an hour. Global box-sizing # Like many other developers, this is how I handle box sizing: *, ::before, ::after { box-sizing: border-box; } Turns out that code block has a pretty significant missing detail. The pertinent difference between the two elements above is that one of them was in a <details> element. More specifically, it was in the ::details-content. Now, ::details-content isn’t an element, it’s a pseudo-element. And that means that * doesn’t apply to it. And even though it was a pseudo element, it wasn’t a ::before or ::after. In other words, my “global” border-box sizing didn’t actually apply to it. So when the element with the weird…