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.
Conversation
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 ;-)
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.
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.
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.
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.
Why would we do that when we have something much better planned for Selectors 4? http://www.w3.org/TR/selectors4/#subject
@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.
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.
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.
@Spinx: no browser supports this. This is just an idea. Maybe one day
Just wanted to say you have a great site and thanks for posting!…
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 :)
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!
You can use CSS4 parent selectors right now with js! And it comes with some awesome states such as :click
sta se desi kad se nista ne unese u komentar jado jadni :D