Selector Decendant/Child Grouping Suggestion

Hello-

I have been working with CSS for a long time and have recently gained some free time (unemployed) to do things like make comments. My number one suggestion for CSS--and I know this is too late for even CSS3--has to do with selectors.

On many of the sites I have worked on, a top impediment to readability has been the length of the selectors. This could easily be remedied with an addition to the selector grouping syntax which allows grouping of descendants.


A simple example of the current state of one stylesheet is:

div.className a:hover, div.className a:active, div.otherClassName a:hover, div.otherClassName a:active {}


Of course, this could be clarified by moving individual selector combinations to separate lines, but it still requires one to wade through several duplicates. In many stylesheets, there are more than two class names involved, making this far more complex.

To simplify this, I would suggest grouping of descendants. Using parentheses, this could become:

div.className (a:hover, a:active), div.otherClassName (a:hover, a:active) {}


Taking this one step further, there could be grouping of both ancestors and descendants. This could look something like this:

(div.className, div.otherClassName) (a:hover, a:active) {}



In summation, I would suggest adding a section called "Grouped Combinators." The contents could be something like this:

Selector groups can be used in combinators by wrapping the group in parentheses. This allows combinators to express a one-to-many, many-to-one, or many-to-many relationship between selectors.


Examples:

----------

The group of combined selectors,

div.className a:hover, div.className a:active {}

is equivalent to

div.className (a:hover, a:active) {}

and 

div.className a:hover, div.otherClassName a:hover {}

is equivalent to

(div.className, div.otherClassName) a:hover {}

----------

Both sides of the combination can be grouped. For example:

.myClass > h1, .myClass > h2, .otherClass > h1, .otherClass > h2 {}

can be reduced to

(.myClass, .otherClass) > (h1, h2)

------------


Anyway, that is my two cents on that subject.

-Gregory Ramsperger

Received on Sunday, 3 October 2004 02:05:52 UTC