CSS Multiple Selectors Without Comma

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

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.

css multiple selectors explanation

li ul li {
  display: block;
  float: none;
}

It means it will target all the <li> elements which are inside li ul..The css are always applied to the last selector in the expression. See example below

Stack Snippet

li {

  color: blue;

}

li ul li {

  color: red;

}

<ul>

  <li>Menu

    <ul>

      <li>Submenu</li>

      <li>Submenu</li>

      <li>Submenu</li>

    </ul>

  </li>

</ul>

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>

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").

Is the comma (multiple selector) a CSS selector combinator?

The WHATWG isn't responsible for any CSS specs. The CSS Working Group is a W3C Working Group. The only CSS specs you'll find are all in w3.org, including Selectors. Other specs may define their own selectors (for example, the :defined pseudo-class appears in the HTML spec), but the selector syntax, and how selectors work in general, is defined by Selectors.

In any case, the Selectors spec is right: there is no such thing as a "multiple selector". That's just a term made up by jQuery as if it were a selector itself, but it's not, it's just a notation used to separate multiple selectors. It's not a "selector" itself, let alone one called a "multiple selector", or a combinator despite what jQuery and MDN claim. The Selectors spec has a very clear and very precise definition of "combinator", one that there's no way the comma could ever fit in, instead living in its own section entirely.

See also: Correct terms and words for sections and parts of selectors

Is placing commas between multiple CSS ID Selectors ok?

The first example is correct, you can legitimately comma separate those selectors

EDITED: @ovokuro is correct BOTH are correct.

The first example would apply a style to three different elements with those three ID's

The second would target the last ID, which is a child of the ID before, which is also a child of the ID before.

---

Related Topics