{"id":7701,"date":"2010-10-21T04:01:54","date_gmt":"2010-10-21T11:01:54","guid":{"rendered":"http:\/\/css-tricks.com\/?p=7701"},"modified":"2010-12-08T17:52:39","modified_gmt":"2010-12-09T00:52:39","slug":"parent-selectors-in-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/parent-selectors-in-css\/","title":{"rendered":"Parent Selectors in CSS"},"content":{"rendered":"

Let’s be clear here, just in case someone is finding this from a search engine: there are no parent selectors in CSS<\/strong>, not even in CSS3. It is an interesting topic to talk about though, and some fresh talk has surfaced. <\/p>\n

Back in 2008, Shaun Inman suggested<\/a> the syntax:<\/p>\n

a < img { border: none; }<\/code><\/pre>\n
[Corrected the following sentence]:<\/em> In this example, it would select a<\/code> tags but only if they contained an img<\/code> tag. (Aside: this would be a weird departure from the typical syntax where the actual elements being selected are on the right, this would be on the left).<\/p>\n
Definitely read through the comments on that post, it is a super interesting thread, and contains some pretty signifiant reasons parent selectors don’t exist yet. David Hyatt, a developer on the front-lines of implementing these kinds of things in WebKit, comments that:<\/p>\n
With parent selectors it becomes extremely easy to accidentally cause a document-wide grovel. People can and will misuse this selector. Supporting it is giving people a whole lot of rope to hang themselves with.<\/p><\/blockquote>\n
Jonathan Snook resurfaced this topic<\/a> and gives us lots of great background on how CSS rendering works. We’ve all heard before that the universal selector is the least efficient CSS selector. Jonathan says if there was a parent selector, that would then easily be the new top dog in inefficient selectors. The argument being that when elements are dynamically added and removed from the page, it may result in the entire document needing to be re-rendered (major memory usage concerns). Jonathan is still optimistic though:<\/p>\n
What I’ve described is not technically impossible. In fact, quite the opposite. It just means that we’d have to deal with the performance implications of using such a feature.<\/p><\/blockquote>\n
Remy Sharp also gets in on the fun<\/a>, and suggests this syntax:<\/p>\n
a img:parent { background: none; }<\/code><\/pre>\n
The key difference being that the :parent syntax would only evaluate a single element, the parentNode<\/code> available in the DOM for every element. This would be similar to forcing the :has selector to only evaluate children rather than all descendants. <\/p>\n
So far everyone is in agreement:<\/p>\n
    \n
  • There are huge performance concerns<\/li>\n
  • Those concerns can be thought of as tradeoffs we should evaluate, not show-stoppers. <\/li>\n
  • Want!<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Let’s be clear here, just in case someone is finding this from a search engine: there are no parent selectors in CSS, not even in CSS3. It is an interesting topic to talk about though, and some fresh talk has surfaced. Back in 2008, Shaun Inman suggested the syntax: a < img { border: none; […]<\/p>\n","protected":false},"author":3,"featured_media":0,"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":false,"jetpack_social_options":[]},"categories":[19,4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":350788,"url":"https:\/\/css-tricks.com\/you-want-enabling-css-selectors-not-disabling-ones\/","url_meta":{"origin":7701,"position":0},"title":"You want enabling CSS selectors, not disabling ones","date":"August 31, 2021","format":false,"excerpt":"I think this is good advice from Silvestar Bistrovi\u0107: An enabling selector is what I call a selector that does a job without disabling the particular rule. The classic example is applying margin to everything, only to have to remove it from the final element because it adds space in\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/css-chaining-not.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":300633,"url":"https:\/\/css-tricks.com\/a-use-case-for-a-parent-selector\/","url_meta":{"origin":7701,"position":1},"title":"A Use Case for a Parent Selector","date":"December 31, 2019","format":false,"excerpt":"Having a \"parent selector\" in CSS is mentioned regularly as something CSS could really use. I feel like I've had that thought plenty of times myself, but then when I ask my brain for a use case, I find it hard to think of one. Well, I just had one\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/pseudo-child.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":164669,"url":"https:\/\/css-tricks.com\/thoughts-media-queries-elements\/","url_meta":{"origin":7701,"position":2},"title":"Thoughts on Media Queries for Elements","date":"March 4, 2014","format":false,"excerpt":"Imagine something like these Transformer Tabs as a widget in a fluid column in a responsive design. Depending on the browser window width, perhaps this design is either 4, 2, or 1 column wide. When it breaks from 4 to 2, the column probably temporarily gets wider than it was,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":304250,"url":"https:\/\/css-tricks.com\/selectors-explained\/","url_meta":{"origin":7701,"position":3},"title":"Selectors Explained","date":"March 2, 2020","format":false,"excerpt":"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\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/selectors-explained.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":336424,"url":"https:\/\/css-tricks.com\/the-css-has-selector\/","url_meta":{"origin":7701,"position":4},"title":"The CSS :has Selector (and 4+ Examples)","date":"March 17, 2021","format":false,"excerpt":"The CSS :has selector helps you select elements when they contain other elements that match the selector you pass into :has().","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/has-pseudo-example.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":351402,"url":"https:\/\/css-tricks.com\/early-days-for-css-scoping\/","url_meta":{"origin":7701,"position":5},"title":"Early Days for CSS Scoping","date":"September 6, 2021","format":false,"excerpt":"There is a working draft spec for CSS scoping now. Other than a weird period where