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.<\/p>\n\n\n\n
Here’s what I wrote:<\/p>\n\n\n\n
.site-footer__nav a:hover u003e svg ellipse:first-child { }<\/code><\/pre>\n\n\n\nAt 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.<\/p>\n\n\n\n
But Kitty Giraudel has this handy new tool that will explain any selector you throw at it.<\/p>\n\n\n\n\n\n\n\n
Here’s how it explained mine:<\/p>\n\n\n\n
An <ellipse><\/code> element provided it is the first child of its parent somewhere
\u2026 within a <svg><\/code> element
\u2026 itself directly within an <a><\/code> element provided it is hovered
\u2026 itself somewhere
\u2026 within an element with class site-footer__nav<\/code>.<\/p><\/blockquote>\n\n\n\nBravo! It even spits out the specificity of the selector to boot. 👏<\/p>\n","protected":false},"excerpt":{"rendered":"
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: At the end of it, I honestly couldn’t even explain what it does to myself. LOL, that probably means […]<\/p>\n","protected":false},"author":2508,"featured_media":304252,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/selectors-explained.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/304250"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=304250"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/304250\/revisions"}],"predecessor-version":[{"id":345956,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/304250\/revisions\/345956"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/304252"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=304250"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=304250"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=304250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}