Selectors Explained

Complex CSS selectors can be hard to read, even when you are the one who wrote them. That is the situation the source describes: a selector that looked fine in the editor but became impossible to explain afterward.

The example selector was:

.site-footer__nav a:hover u003e svg ellipse:first-child { }

Kitty Giraudel has a new tool that explains any selector you give it. For the selector above, the explanation reads:

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 class site-footer__nav.

The tool also reports the specificity of the selector.