Previous Parent

Plenty of people in the CSS world want a parent selector. It’s complicated and I understand it if browsers didn’t implement it.

However, something that could work and could be useful is what I call the Previous Parent selector.

Since CSS is essentially read from right-to-left, and from current element to top element, it should be possible to find a child element of a parent element that has already rendered its children.

Imagine the following HTML structure:

<div class="A">
	<label>
	<input>
</div>
<div class="B">
	<div>
		<label>
		<input>
	</div>
</div>
<div class="option">
	<label>
	<input>
</div>

Ignore the lack of closing tags, as the pedant in you may be so inclined to mention. This is just to get a sense of the document structure.

How can we effect change on the DIV with the class of option if they’re children of a sibling element? The Previous Parent selector would allow drilling down into previously rendered parents.

.option { display:block; }
/* clicking on A > input would hide the option */
input:checked <+ div ~ .option { display:none; } 
/* clicking on B > div > input would hide the option */
input:checked <~ div ~ .option { display:none; }

You’ll notice the use of <+ to indicate that the input:checked should be the immediate child of the DIV. The use of <~ indicates that the input:checked should be a descendant (at any level) of the DIV.

The fact that the elements need to appear before the current element does limit the effectiveness of this but would allow for more complicated interactions to be expressed in CSS that aren’t currently possible.

Published September 22, 2012
Categorized as HTML and CSS
Short URL: https://snook.ca/s/1025

Conversation

15 Comments · RSS feed
FremyCompany said on September 22, 2012

I faced the exact same same markup before, and I like the solution you come with. However, I find the syntax confusing. Personally I would prefer :containing(...) and a prose text saying that :contains must be followed directly by + or ~. That way, if we find other cases that may work in the future, we could add them.

Just an opinion, though ;-)

brian said on September 22, 2012

Have you checked out hitchjs? You can use a :has oriented selector (as proposedby one of the spec editors over a decade ago) in your css now with it. It also has lots of other implementations of selectors level 4+ selectors and provides a means for you to create your own plugin (a hitch) with a draft proposal.

Jonathan Snook said on September 22, 2012

I haven't tried hitchjs. I could put together a plugin but not sure that my idea is all that complicated that it needs a prototype.

brian said on September 22, 2012

Well...if you would like to use it or let others, it does :) chances that anyone will be able to use anything even remotely close natively in the next year or two are slim imo, the original proposals by draft co-authors are more than a decade old. Unfortunately, only use allows us to see what people might be able to do with it, or how they might improve it if they could. Rapidly being able to try out new ideas in a forward compatible way can expedite iterations and get us something good with less worry about holes or acceptance. Just my opinion of course.

Rudie said on September 23, 2012

I like http://www.w3.org/TR/2011/WD-selectors4-20110929/#subject better Much more readable and I *think* tecnically simpler since all selector parts are evaluated anyway.

Lea Verou said on September 23, 2012

Why would we do that when we have something much better planned for Selectors 4? http://www.w3.org/TR/selectors4/#subject

Jonathan Snook said on September 23, 2012

@Rudie and Lea: that's pie-in-the-sky and no indication that it'll ever make it into a browser implementation. Tab Atkins indicates that even with a spec in hand, it's not likely. The point of this proposal is to have something more likely based on my understanding of how browsers handle things. Remember, a spec doesn't amount to a hill of beans unless there is an implementation. Otherwise, I'm sure many people would have said why bother with grid and flexbox when you have template layout. It's about implementation. That's what I want to see.

Lea Verou said on September 23, 2012

Sure, but lets try to get that implemented first, before giving up and looking for alternatives. Browsers can be very inventive when they are pushed to implement something.

Spinx Inc said on October 12, 2012

I am grateful for the nice article about Previous Parent selector, but I have a question for you, is this supported by all browsers? I would appreciate an answer for this.

Jonathan Snook said on October 12, 2012

@Spinx: no browser supports this. This is just an idea. Maybe one day

Evelyn Jeanne Shaw said on October 13, 2012

Just wanted to say you have a great site and thanks for posting!…

John said on October 18, 2012

Very nice idea, Jonathan. One day CSS selectors will be as varied and rich as jQuery (or other similar JS frameworks), but for now we can dream :)

Irina Vasilieva said on October 25, 2012

You guys did a great job spending your time to create this article! If I had to explain my emotions about your website in only one word ? it would be WOW! Thank you! P.S. Subscribed for updates!

John Harrington said on December 13, 2012

You can use CSS4 parent selectors right now with js! And it comes with some awesome states such as :click

ime said on March 20, 2013

sta se desi kad se nista ne unese u komentar jado jadni :D

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.