Selecting the parent of an element

Hi all.

Masata Yakura recently posted an update on Google+ [1], which alluded to the
ability to select parents of elements within a CSS selector [2]. This has
been picked up elsewhere on the web; for example, on David Walsh's site. [3]

In essence (as I understand it), this allows you to specify the element to
which the styles should be applied by prefixing it with a '$' symbol; $E > F
matches an E element which is a parent of an F element (incidentally,
there's a typo in the table for [2] for this example).

Whilst I certainly welcome this idea, I believe that there are some issues
with it, and I would like to propose an alternative syntax. I've outlined
some of these problems, and the proposal, below.


*Problems*

1. This breaks the natural reading order of CSS selectors: the right-most
"part" of a selector no longer identifies the element to which the rules
should be applied.
2. It provides a very specific solution to a very specific problem, rather
than a generic, extensible solution. Using this syntax, how would one, for
example, identify a preceding direct sibling of an element E?
3. The '$' symbol is already in use -- E[foo$="bar"] matches an E element
whose "foo" attributes ends with "bar". This is clearly a nod to regular
expression syntax.


*Proposed solution: Reversed combinators*

MooTools' Slick selector engine introduced the concept a reversed
combinator. [4] To quote the linked document, "Reversed Combinators are a
classification of combinators that are the reverse of their original. They
redirect the flow of selectors and combinators to travel up the node tree
rather than down. Slick implements these by prepending *!* to a selector or
combinator."

In other words, one would write F !> E to match an E element which is a
direct parent of an F element. Intuitively, one can write F !+ E to match an
E element which is a direct preceding sibling of F; F !~ E would match all E
elements which are preceding siblings of F.

I notice that someone has updated [4] to include the same selector in both
the proposed syntax, and with reversed combinators; I include it below for
completeness.

$table th:nth-child(3) strong > a

a !> strong ! th:nth-child(3) ! table

Both of these will select table elements whose third th element contains a
strong anchor element. Notwithstanding the inefficiencies of this selector,
I think that it functions as a good comparison between the two syntaxes.


I would like to propose that reverse combinators be considered in place of
the proposed '$' syntax. They are already in use (through MooTools' Slick
selector engine), and avoid some of the problems I outlined above with the
'$' syntax.

*As some background, I am the Project Development Manager at a company
called SEQTA Software [5], which develops a comprehensive web-application
for education, using MooTools. I spend most of my day writing JavaScript and
CSS.*

*Refs*
[1] https://plus.google.com/u/1/115203843155141445032/posts/KmqzJxzPTJj
[2] http://www.w3.org/TR/2011/WD-selectors4-20110929/
[3] http://davidwalsh.name/css4-preview
[4]
https://github.com/mootools/slick/wiki/How-do-I-specify-a-different-subject-for-the-selector%3F
[5] http://http://www.seqta.com.au/

Barry van Oudtshoorn
http://barryvan.com.au/
bvanoudtshoorn@gmail.com