Selectors Explained
source link: https://hugogiraudel.github.io/selectors-explained/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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 <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
.
Bravo! It even spits out the specificity of the selector to boot.
Direct Link to Article — Permalink
The post Selectors Explained appeared first on CSS-Tricks .
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK