Enhancing grouping of selectors

I am not sure whether this is the correct forum to propose enhancements to CSS, if not I apologize and just ask that you redirect me to the correct place.

CSS selectors are very powerful but sometimes they can be quite verbose, especially when using combinators such as child and descendant which often involve a lot of repetition, e.g.

.foo > .blah > a,
.foo > .blah > a:hover,
.foo > .blah > a:visited,
.bar > .blah > a,
.bar > .blah > a:hover,
.bar > .blah > a:visited { /*properties*/ }

The above are simplified versions of real selectors, and there is no way to simplify them without adding extra information (e.g. classes) into the markup being styled, whose only purpose would be to simplify the CSS.

I was wondering whether we could use () to group selectors making it shorter to write, e.g.

(.foo, .bar) > .blah > (a, a:hover, a:visited) { /*properties*/ }

So when you have two groups of selectors combined together the result is the same as if you used the combinator to combine every single selector in the first group with every single selector in the second group.

What do you think?
Is this something that would be useful?
Does it conflict with other intended usages of () in selector syntax?

Received on Friday, 17 September 2010 10:37:46 UTC