Webmasters Gallery

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 > 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 Hugo Giraudel has this handy new tool that will explain any selector you throw at it.

Here’s how it explained mine:

An element provided it is the first child of its parent somewhere
… within a element
… itself directly within an element provided it is hovered
… itself somewhere
… within an element with class site-footer__nav.

Direct Link to Article — Permalink

The post Selectors Explained appeared first on CSS-Tricks.