Post Archive
› January 9, 2004
Is there such thing as an ancestor selector?
Hey, I have a question I need help with. Anyone out there who has information on this, please let me know.
So without going into much detail of why I need to do this, it would put my mind at ease if I knew for sure that such a thing does not exist or if it does... it is poorly supported. I need to find a method to do the opposite of descendants and children in CSS2.
So you know how you can do this:
div.headerbar p {
border: 1px solid #fc9
}
or this
div.headerbar > p {
border: 1px solid #fc9
}
I want/need to do the opposite of a descendent, such as an ancestor. Here's the statement I'm trying to achieve:
If a div exist with the class "headerbar" inside of a table, style the table how I see fit. So you see my dilemma? I want to go up the DOM not down. And to make things interesting, I can't class the table or ID it. It is programmatically written in our portlets as of now. Sure cascading mean flowing downward but with all the interesting types of selectors found in CSS2 and 2.1, I'm wondering if there is a provision for such a thing.
Anyone thoughts/ideas?
Comments
1. January 9, 2004 03:23 PM
2. January 9, 2004 03:27 PM
Robbert Broersma Posted…
Why not look in the according specification, instead of asking?
3. January 9, 2004 03:54 PM
liorean Posted…
No possibility of an XPath/XPointer CSS selector mechanism to do the job?
4. January 9, 2004 03:57 PM
Anne Posted…
XPath, yes. But XPath is not compatible with CSS in any way. You would have to use JS with the DOM.
5. January 9, 2004 04:39 PM
liorean Posted…
No, what I meant was, is there no possibility of a selector such as :x-path( XPath for the the element you need ){ border: 1px solid #fc9;} to be added to CSS, or for that matter the ancestor and parent selectors to be added sometime in the future?
6. January 9, 2004 04:53 PM
Noel D. Jackson Posted…
Try using the E + F way of thinking (take a look at the spec), a direct adjacent combinator.
7. January 9, 2004 05:05 PM
James Craig Posted…
There was some talk of putting that in the CSS 3 spec. It was dismissed for several reasons but I believe one of the proposed syntaxes was parenthesis:
html > body (.parent) .child { foo: bar; }
Where the selector would match an element with a class of ‘parent’ that contained an element with a class of ‘child’... Again, that syntax was dismissed. As Robbert said, check the CSS 3 Spec but I don’t see anything that looks hopeful. Keep in mind that it would still be several years before anything is supported anyway.
Right now I’d use the DOM property parentNode. You may need to use parentElement in some older versions of IE, but I can’t remember which version numbers.
Sub to the W3C Style list if you’d like to suggest another syntax or follow other future CSS discussions.
8. January 10, 2004 05:42 PM
Dougal Campbell Posted…
There is definitely no current or in-the-works way to style a parent element, without using scripting. From remarks I've seen by W3C/CSS members in various fora, it's unlikely that it will be added anytime soon.
But it sure would make a lot of things easier.
9. January 10, 2004 06:36 PM
Robbert Broersma Posted…
The point is: I yet have to hear an example of a situation where it semantically makes sense to use something like table < .headerbar instead of existing methods.
10. January 11, 2004 02:26 AM
liorean Posted…
There is always the case where you want to style the containing element for, let's say, the :target pseudoclass - you have no way of referencing the parent of the :target pseudoclass at the moment. For instance. Same would go for any other single element targetting selector where you may not know what the ancestors of the element are beforehand.
11. January 12, 2004 10:18 AM
Dougal Campbell Posted…
I'd say a very common case where this would be useful is to style links that contain images: [a href="foo"][img src="bar" /][/a]
I almost always want to style links around images differently than text links. Without a parent selector, you have to remember to add a class.
12. January 12, 2004 11:50 AM
ant Posted…
Another useful place for this is CMS controlled cases where new templates aren't reasonable. I've run into some pages where I don't want to change the HTML, but I want to change the look of a major parent for a one-time design change or addition. Where I want to use a unique child, but affect the parent. Especially helpful for folks having to deal with demanding advertisers.
13. March 26, 2004 01:14 AM
Paul Kilroy Posted…
I really like the idea of XPath. Its a very nice language and it would eliminate the needs for the selector bloat that is starting to creep in.
14. March 1, 2006 01:37 AM
Jon Posted…
Is the DOM considered scripting? If not then there you have it.
Node parentNode()I'm not sure if it's possible to select DOM elements in CSS
15. April 3, 2006 02:17 PM
Patrick Posted…
This would be great for flyout menus, being able to show an indicator that there are children without having to hover.
Anne Posted…
Nope, not possible. That would ruin all the great things from CSS.