You replace ResizeObserver with a container query, the diff is mostly red, and everyone approves it before lunch. This was what it looked like before you made the change: - The selector matches more than we meant. The :has(img) rule matches any descendant image, so the comment’s avatar counted as a hero image.
And the p element selector matches any descendant paragraph. As a result, the comment’s text was caught in the selection. - The selector outweighed the comment’s own rule. MDN’s specificity guide explains that :has() adds no weight by itself, but its argument does.
That gives .card:has(img) p a specificity score of 0-1-2, while .comment p comes in at just 0-1-1 and loses the battle. It could get even more complex and difficult to catch because the state changes at runtime. Let’s say a user posts a comment that includes an avatar.
The body text of the card above it loses its spacing. Good luck reproducing that from a bug report that says “spacing looks off sometimes.”
