Have you ever found yourself either writing a CSS selector that winds up looking confusing as heck, or seen one while reading through someone’s code? That happened to me the other day.
Here’s what I wrote:
.site-footer__nav a:hover u003e svg ellipse:first-child { }At the end of it, I honestly couldn’t even explain what it does to myself. LOL, that probably means there was a better way to write it.
But Kitty Giraudel has this handy new tool that will explain any selector you throw at it.
Here’s how it explained mine:
An
<ellipse>element provided it is the first child of its parent somewhere
… within a<svg>element
… itself directly within an<a>element provided it is hovered
… itself somewhere
… within an element with classsite-footer__nav.
Bravo! It even spits out the specificity of the selector to boot. 👏