Re: [CSSWG] Selectors groups (with commas) are too limited and unecessarily long to write non-combinatorially

I don't understand why it is so simple to combine selectors easily with
various combinators to add incresing selectivity, but why it is not
permitted in the reverse direction without using the overlong stntax of
selector groups, using commas, and that require repeating the long
expression of combined selectors.

For exampe we can write this group:

selector1,
selector2;
selector3 { styles... }

but when all three selectors above are using a common subset of combinators
or basic selectors (pseudo-selectors, single element, single attribute), we
have to repeat them everywhere.

Why not allowing the use of parentheses to group them?

e.g

nav#external-links a[href="http://example.com"],
nav#external-links a[href="https://example.com"],
nav#external-links a[href^="http://example.com/"],
nav#external-links a[href^="https://example.com/"] { /*styles...*/ }


would be written more simply (and completely equivalently, the above
"selector group" being an expansion of the following "compact selector") as:

nav#external-links a(
  [href="http://example.com"],
  [href="https://example.com"],
  [href^="http://example.com/"],
  [href^="https://example.com/"]
) { /*styles...*/ }


You can go further and group the values of attributes to test with this
other equivalent compact selector:

nav#external-links a(
  [href=(
    "http://example.com",
    "https://example.com"
   )],
  [href^=(
    "http://example.com/",
    "https://example.com/"
  )]
) { /*styles...*/ }


You can also group the attribute test operators when they are on the same
attribute name:

nav#external-links a(
  [href(
    = (
      "http://example.com",
      "https://example.com"
    ),
    ^= (
      "http://example.com/",
      "https://example.com/"
    )
  )]
) { /*styles...*/ }


You can also group several tested attributes (here I add the src attribute
in addition to the href attribute):

nav#external-links a(
  [(href,src)(
    = (
      "http://example.com",
      "https://example.com"
     ),
    ^= (
      "http://example.com/",
      "https://example.com/"
    )
  )]
) { /*styles...*/ }


And now you can extend easily these selectors to cover other links
elsewhere on other elements in the document:

nav#external-links (a, map area)(
  [(href,src)(
    = (
      "http://example.com",
      "https://example.com"
     ),
    ^= (
      "http://example.com/",
      "https://example.com/"
    )
  )]
) { styles... }


Of course, if we have an operator that allows using regexps for matching
attribute values it will be simpler:

nav#external-links (a, map area)(
  [(href,src)(
    = /https?:\/\/example.com/,
    ^= //https?:\/\/example.com\//
  )]
) { /*styles...*/ }


Note that a whitespace touching the inner side of grouping parentheses (or
both sides of a grouping comma) are not significant, unlike between basic
selectors where the space indicates a succession to a separate element)

If we had to expand this last example with the commas into an equivalent
selector group, it would contain the following eight selectors;

nav#external-links a[href=/https?:\/\/example.com/],
nav#external-links a[href^=/https?:\/\/example.com\//],
nav#external-links a[src=/https?:\/\/example.com/],
nav#external-links map area[src^=/https?:\/\/example.com\//],
nav#external-links map area[href=/https?:\/\/example.com/],
nav#external-links map area[href^=/https?:\/\/example.com\//],
nav#external-links map area[src=/https?:\/\/example.com/],
nav#external-links map area[src^=/https?:\/\/example.com\//] {
/*styles...*/ }


And without support for regexps (noted above using slashes) the last
"compact" notation becomes this selectors group with 16 members (sic!).
This is rapidly becoming combinatorial with the current limitation of
syntax, and very errorprone when editing (unless we use a CSS preprocessing
macrolanguage such as LESS or DSSS, supported only on server-side, but the
server will still need t generate the following long CSS script):

nav#external-links a[href="http://example.com"],
nav#external-links a[href="https://example.com"],
nav#external-links a[href^="http://example.com/"],
nav#external-links a[href^="https://example.com/"],
nav#external-links a[src="http://example.com"],
nav#external-links a[src="https://example.com"],
nav#external-links a[src^="http://example.com/"],
nav#external-links a[src^="https://example.com/"],
nav#external-links map area[href="http://example.com"],
nav#external-links map area[href="https://example.com"],
nav#external-links map area[href^="http://example.com/"],
nav#external-links map area[href^="https://example.com/"],
nav#external-links map area[src="http://example.com"],
nav#external-links map area[src="https://example.com"],
nav#external-links map area[src^="http://example.com/"],
nav#external-links map area[src^="https://example.com/"] { /*styles...*/ }


So please consider expanding the support of selector groups by allowing
their use within parentheses as if they were a simple selector, and by
offering grouping also for sets of attribute names, or for sets of
attribute comparator+value, or for sets of attribute value.

And also for groups of media selectors (media type, or total pixel size, or
physical resolution, or physical total size, or color capability, or
static/printed vs. animatable, or audio only, or text-only without colors
and style emphasis such as Braille needing additional textual annotations
or specific layout and notably indentation of rows written with a regular
grid of cells with fixed size...).