CSS selector wish list
by, 03-23-2010 at 11:18 AM (50896 Views)
With CSS3, we have gotten many new pseudo selectors that give us a great deal of options. However, the short list of combinator selectors has only been increased from 3 to 4:
The first combinator is the most used selector and selects any element bar that is a descendant of foo. The second combinator selects any element bar that is a child (direct descendant) of foo. The third combinator selects any element bar that is an adjacent sibling to (comes directly after) foo. The fourth one, that was defined in CSS3, selects any element bar that is a general sibling (comes after but not necessarily directly after) foo.Code:foo bar foo>bar foo+bar foo~bar
The problem here is that there is no way to select foo. One case that I often come across is when foo is a parent to bar. To select bar, we use
foo>barso it makes a lot of sense to select foo using
bar<foo. In the adjacent sibling case we use a plus sign to go forward:
foo+barso it would make sense to use a minus sign to go backward:
bar-foo. This is fine for elements but can be problematic for class and id values where the minus sign can be mistaken for a hyphen. The same goes for XML elements that (I think) can contain hyphens. The solution could be to only allow combinators separated by spaces:
bar - foo(now, the spaces are optional (except for the first case of course)).
The opposite symbols to use for the other two cases are less obvious, but we could for instance use
bar^foofor the first case and *looks at keyboard to find a symbol* maybe
bar=foofor the last case (although an equal sign doesn't make that much sense here (then again, neither does an exclamation point when it means not in some languages (except for
!importantin CSS which I always think of as not important although it means the exact opposite (am I alone?)))).
So my wish list would look something like this:
The selectors in red are my suggestions and don't work now, so don't use them!Code:foo bar bar ^ foo foo > bar bar < foo foo + bar bar - foo foo ~ bar bar = foo
So please W3C, can I has selectors?