What Exactly Does This CSS Selector with a Comma Match

What exactly does this CSS selector with a comma match?

You are misunderstanding the precedence of the comma.

.table_legenda th, td {}

is equivalent to:

.table_legenda th {}
td {}

and not to:

.table_legenda th {}
.table_legenda td {}

You need to specify the complete selector each time you have a comma:

.table_legenda th,
.table_legenda td {}

A preprocessing tool such as SASS can give you alternative syntax:

.table_legenda {
    th, td {}
}

What do commas and spaces in multiple classes mean in CSS?

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

That says "make all .grid_6's within .container_12's and all .grid_8's within .container_16's 460 pixels wide." So both of the following will render the same:

<div class="container_12">
  <div class="grid_6">460px Wide</div>
</div>
<div class="container_16">
  <div class="grid_8">460px Wide</div>
</div>

As for the commas, it's applying one rule to multiple classes, like this.

.blueCheese, .blueBike {
  color:blue;
}

It's functionally equivalent to:

.blueCheese { color:blue }
.blueBike { color:blue }

But cuts down on verbosity.

Why does putting comma selectors inside a space selector break the parent?

In CSS, rules have the form:

selector0 [, selectorN ]*
{
    property0: value0[,
    property1: value1]*
}

So the comma , is used to separate different selectors for the same property set. For example, if you wanted two radically different selectors for the same property set.

Selectors in CSS must be fully-qualified, there is no contextual-sensitivity - this is partly because CSS is designed to be forward-compatible: browsers are instructed to try each and every selector in a rule independently, so browsers gracefully-degrade when they encounter new selector syntax they don't support.

To get the effect you want just type more :)

#parent_id input,
#parent_id textarea {
    width: 100px;
}

Note that there is a proposed/experimental :matches() selector function which works as a logical OR operator in selectors, it's in the CSS Level 4 Selectors specification (currently in a working-draft state, as of 2016-05-04: https://drafts.csswg.org/selectors-4/ ).

The matches-any pseudo-class, :matches(), is a functional pseudo-class taking a selector list as its argument. It represents an element that is represented by its argument.

So in your case it would be:

#parent_id :matches( input, textarea ) {
    width: 100px;
}

But I don't think this usage is really that better, it's less obvious and requires greater knowledge of CSS.

Simplifying comma separated CSS selectors with common prefix/suffix

As per the comments, this is simply not possible with plain CSS right now. Your only option to shorten the selector is to use a pre-processor, like SASS (Syntactically Awesome StyleSheets). SASS allows you to write more readable, shorter code. You can compile a SASS (*.scss) file to plain CSS on your own computer, so by the time it's on the server, it's the plain old CSS you are used to, understood by all browsers. No extra requirement from your users.

For this particular case, you could use a for-each loop.

@each $domain in 'abc.com', 'def.com', 'ghi.com', 'jkl.com' {
  html:lang(qw) div[data-domain*='#{$domain}'] {
    display: none !important;
  }
}

This would result in the following CSS:

html:lang(qw) div[data-domain*='abc.com'] {
  display: none !important;
}

html:lang(qw) div[data-domain*='def.com'] {
  display: none !important;
}

html:lang(qw) div[data-domain*='ghi.com'] {
  display: none !important;
}

html:lang(qw) div[data-domain*='jkl.com'] {
  display: none !important;
}

Comma separated selectors

The second example in your question is correct:

div#addannouncmentdiv form button,
div#addannouncmentdiv form input,
div#addannouncmentdiv form textarea {
width: 50%;
}

In fact, the following would be just as good:

#addannouncmentdiv button,
#addannouncmentdiv input,
#addannouncmentdiv textarea {
width: 50%;
}

If you add a class to your <form> such as:

<form class="aad">

then you can simply use:

.aad button,.aad input,.aad textarea {
width: 50%;
}

css comma separated selectors do not work for form input:not(...)

The comma represents a logical OR in selector syntax. Each element will thus be matched against each part of your selector at a time, and if it satisfies at least one of those parts, the rule is applied.

So in your case, this is what happens:

The input[type='button'] will match your form input:not([type='submit']) selector
The input[type='submit'] will match your form input:not([type='button']) selector
The input[type='text'] will (obviously) match both selectors

That's why your rule gets applied to all your form inputs.

If you want to combine both negations, chain them like so, instead of using a comma-separated list:

form input:not([type='button']):not([type='submit']) { width: 200px }

Specificity rules for comma delineated lists

Remember that CSS is cascading - meaning the style that is referenced FURTHER down a CSS file will take precedence assuming the selector is the same:

header {  background-color: red;}p, span, header {  background-color: yellow;}

<header>  HEADER</header>

Correct terms and words for sections and parts of selectors

What is the correct term for the sections of CSS selectors that are separated by commas?

These are called complex selectors. The entire comma-separated list is known as a selector-list.

Within those sections, what is the term for the parts separated by combinators (spaces, +, >, etc)?

These are known as compound selectors.

So, a selector-list is made up of one or more complex selectors separated by commas, and each complex selector is made up of two main parts: compound selectors, and combinators. It can also optionally contain pseudo-elements.

Compound selectors used to have the rather convoluted name "sequence of simple selectors". Worse still, complex selectors were just called "selectors". Needless to say, I recommend using the new terms as they are much more straightforward, much less cumbersome and completely unambiguous compared to their predecessors.

And since I'm here, here are the rest of the definitions...

A simple selector is one fundamental component of selectors. It is any one of the following:
- Universal selector (*), optionally with a namespace
- Type selector (a, div, span, ul, li, etc), optionally with a namespace
- Attribute selector ([att], [att=val], etc), optionally with a namespace
- Class selector (.class)
- ID selector (#id)
- Pseudo-class (:pseudo-class)
As answered above, a compound selector (formerly a "sequence of simple selectors") is a chain of simple selectors not separated by a combinator:
```
a:not([rel="external"]):hover
```
A combinator is another fundamental component of selectors. It is a symbol or token that separates two compound selectors, establishing in its place a relationship between the two elements represented by the two compound selectors. There are currently four combinators in use today:
- Descendant combinator:
```
article p
```
- Child combinator:
```
/* 
 * The extra spaces in between are whitespace,
 * and are therefore insignificant.
 */
ul > li
```
- Adjacent sibling combinator:
```
header + section
```
- General sibling combinator:
```
h2 ~ p
```
More combinators may be introduced in later specifications.
And a complex selector (formerly just "selector") is a complete string made up of compound selectors linked by combinators:
```
nav[role="main"] > ul:first-child > li
```
The subject of a complex selector is its last, or only, compound selector, representing the element that will be matched or styled. In the above example, the subject of the selector is li.
The term selector has been generalized, so it may now refer to any of the following for the purposes of simplicity and brevity, and which one it's referring to at any given moment should be gleaned from context:
- Simple selector
- Compound selector
- Complex selector
- Selector-list (e.g. the "selector" component of a style rule)

Some personal notes:

The term "key selector" was coined by browser vendors for use with selector implementations, and is not an official term. It is often used to mean "subject of the selector" however, because implementations happen to use the subject of the selector as the key for the purposes of determining matches.
The term "pseudo-selector" was coined by authors to mix pseudo-classes and pseudo-elements, and is not an official, or indeed meaningful, term. Although you can find it in some early-stage W3C CSS2/3 drafts, that was probably a mistake. Please don't use this term, as it needlessly creates confusion by attempting to group two completely different concepts into a single umbrella term.
Pseudo-elements (::pseudo-element) are not simple selectors, and therefore cannot appear in places where only actual elements may be matched. However, they are still considered selectors for the purposes of CSS parsing, and as stated above currently can appear at the end of any complex selector in a list (i.e. at the end of the last, or only, compound selector of each complex selector).
In CSS, a typical style rule (formerly "ruleset") consists of a selector and a declaration block.
Namespace prefixes are not selectors in their own right, but they may be applied to type selectors, universal selectors and attribute selectors to match components in a document that are (or are not) namespaced.
The specificity of a selector currently only refers to that of a single complex selector. When matching rules, any of the complex selectors in a list that match a given element will be considered for specificity calculations. If more than one complex selector matches an element, the most specific one will be used for calculations.
Specificity will be a more complicated issue with some level 4 selectors, such as :is() and the enhanced :not(), and the of S notation in the enhanced :nth-child() pseudo.

What is the regex of a CSS selector

So finally I've found a way better way to do it.

I use a LESS editor (eg: http://lesstester.com/)

and simply nest my whole css file:
.mySelector{ your css here }

What Exactly Does This CSS Selector with a Comma Match