Currently, there exists no mechanism to select the parent of a matched child selector. There is no look ahead, like in regular expressions or XPath. This sucks, because it means that you have to define additional styles to affect parents, and parents with specific children differently. Two methods strike me as do-able at the moment to achieve what we are trying to do, and they both use Javascript, which wasn’t meant to do things like this.⌘
Bottom up
In pseudo-code, we can do:⌘
children = get_elements_by_tagname('xx');
for(i in children)
if(children[i].class_name == 'yy')
/* do something to "children[i].parent" */
Which means that if we want to style the parent of all a.child tags, we need to get all the a tags (time lost looking for unnecessary tags), check their class name for the required condition class (time lost iterating through unnecessary tags) and finally apply the styles to its parent. A simpler (and possibly faster1) way would be to use $('parent child').parent() with jQuery, but that will require including a library for just one or two statements.⌘
Alternatively, you could also get all the parent elements, and based on the child match, add a class to the parent. Then, in your CSS, a definition for that class will style your parents appropriately.⌘
They are both clunky methods to do something which I am sure doesn’t need too much effort to implement natively. By the looks of it, this will not be included in CSS3. Looks like a job for Textual!⌘
-
I have yet to take a look at jQuery’s internals, so I cannot judge the times it takes to execute certain DOM functions like element selections. ↩
