Comma in CSS, Multiple Selectors Using the Same CSS

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.

Comma in CSS, multiple selectors using the same CSS

.Resource table.Tbl td, .Resource table.Tbl2 td { /* some css*/ }

You should add the full ancestor path for both rules. Not just where you see differences.

How to combine multiple selectors for the same rule

To group CSS selectors in a style sheet, you use commas to separate multiple grouped selectors in the style. In this example, the style affects two classes input#input_9_2 and input#input_9_3.

input#input_9_2,
input#input_9_3
{
  max-width: 500px;
}

The comma means "and", so this selector applies to all input#input_9_2 elements and input#input_9_3 elements. If the comma were missing, the selector would instead apply to all input#input_9_3 elements that are a child of an input#input_9_2. That is a different kind of selector, so the comma is important.

Any form of the selector can be grouped with any other selector.

CSS specificity of comma-separated group selector

In your first example you have ONE selector. It is a selector comprised of multiple simple selectors separated by descendant combinators. But it is still one selector.

In your second example you have FOUR selectors. The comma separates selectors.

§5. Groups of
selectors
A comma-separated list of selectors represents the union of all
elements selected by each of the individual selectors in the list.
For example, in CSS when several selectors share the same declarations,
they may be grouped into a comma-separated list.

Specificity applies to a single selector, so in your second example, which represents four distinct selectors, you need to calculate the specificity for each one separately.

Think about it this way:

The purpose of specificity is to establish which CSS rule gets applied to an HTML element when there are multiple selectors targeting the same element.

.intro {
  border: 2px dashed red;
}

div {
  border: 1px solid black;
}

<div class="intro">text</div>

Associating multiple selectors with a pseudo-class

Your shot in the dark is actually very close to what's proposed for Selectors 4, except it takes the form of its own pseudo-class, :matches() (with the parentheses and the same comma-delimited syntax):

:matches(a, button, img):hover, :matches(a, button, img):focus {
    border: 2px dashed black;
}

which can be further simplified to:

:matches(a, button, img):matches(:hover, :focus) {
    border: 2px dashed black;
}

As it's not yet implemented outside of internal prefixes, you'll have to make do with writing it all out manually in the meantime:

a:hover, button:hover, img:hover,
a:focus, button:focus, img:focus {
    border: 2px dashed black;
}

Or make use of a preprocessor to do all the heavy lifting for you.

How to wait for multiple selectors?

You need to use a comma-separated list of CSS selectors wich will match all elements that can be selected by one of the selectors in that list:

//                                           ↓ comma
await page.locator('.text > span:nth-child(1), span:has-text("nothing")').innerText();

It will wait for either .text > span:nth-child(1) or span:has-text("nothing").

CSS multiple selectors without comma

When you use the comma, like

#menu, .item

you are saying:

all elements whose id is menu AND all elements whose class is item

When you nest selectors without the comma, like

#menu .item

you are saying

all elements that has class item inside a container whose id is menu

Calculating specificity of multiple selectors on one rule

I suspect your confusion comes from the assumption that when you group multiple selectors, you can manipulate the specificity of the selectors that are contained within the comma-separated list. This is not true: the comma-separated selector list is simply a shorthand to declare the same styles that are applied to all your selectors.

In other words:

#box1 div.spec2 p,  /* Specificity: 0, 1, 1, 2 */
#box1 #box2 p {     /* Specificity: 0, 2, 0, 1 */
    color: blue;
}

#box1 #box3 p {     /* Specificity: 0, 2, 0, 1 */
    color: green;
}

...is actually equivalent to:

#box1 div.spec2 p { /* Specificity: 0, 1, 1, 2 */
    color: blue;
}

#box1 #box2 p {     /* Specificity: 0, 2, 0, 1 */
    color: blue;
}

#box1 #box3 p {     /* Specificity: 0, 2, 0, 1 */
    color: green;
}

Can you set multiple elements hover declaration to only one div?

If the id of the parent elements starts with el you can use the [attr^="value"] starts-with attribute selector.

[id^="el"]:hover .test{
  // some code
}

Otherwise you will have to use the , to separate the selectors

#el1:hover .test,
#el2:hover .test,
#el3:hover .test{
 // some code
}

Finally you could add a common class to the parent elements so that you can target it directly

<div id="el1" class="common-class">
  <span class="test">..</span>
</div>

<div id="el5" class="common-class">
  <span class="test">..</span>
</div>

and use

.common-class:hover .test{
  // some code
}