What Do Commas Mean in CSS Selectors

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.

What does comma in CSS definition mean

The comma separates selectors allowing one group of CSS styles to apply to multiple different groups. In your posted CSS:

.Container .layout,
.groupContainer {
  width: 100%;
}

width: 100% will be applied to elements of class layout within elements of class Container, and to elements with the groupContainer class.

References:

• CSS: 'Groups of Selectors'.

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>

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.

CSS class chaining versus comma separated vs space separated syntax

These selector is worked following code. And these selector's specificity is:

1. .someclassA.someclassB: 0 2 0
2. .someclassA .someclassB: 0 2 0
3. .someclassA: 0 1 0

.someclassA.someclassB {  color: red;}
.someclassA .someclassB {  color: blue;}
.someclassA,.someclassB {  color: green;}

<p class="someclassA">.someclassA</p><p class="someclassB">.someclassB</p><p class="someclassA someclassB">.someclassA.someclassB</p><p class="someclassA">  <span class="someclassB">.someclassA .someclassB</span></p><p class="someclassB">  <span class="someclassA">.someclassB .someclassA</span></p>

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.

Why do CSS comma separated selectors break entire rule when one part is unknown?

It turns out this is actually intentional and defined in Selectors Level 3 (emphasis by me):

If just one of these selectors were
invalid, the entire group of selectors would be invalid. This would
invalidate the rule for all three heading elements, whereas in the
former case only one of the three individual heading rules would be
invalidated.

Invalid CSS example:

h1 { font-family: sans-serif }
h2..foo { font-family: sans-serif }
h3 { font-family: sans-serif }

is not equivalent to:

h1, h2..foo, h3 { font-family: sans-serif }

because the above selector (h1, h2..foo, h3) is entirely invalid and
the entire style rule is dropped. (When the selectors are not grouped,
only the rule for h2..foo is dropped.)

---

CSS 2 didn't specify what to do when one selector was wrong. In fact the W3C spec states that the condensed form is equivalent to the written out version:

In this example, we condense three rules with identical declarations
into one. Thus,

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

is equivalent to:

h1, h2, h3 { font-family: sans-serif }

EDIT: (thx @BoltClock):

CSS 2.1 does specify the behavior and it is the same as with CSS3:

(...) since the "&" is not a valid token in a CSS 2.1 selector, a CSS 2.1 user agent must ignore the whole second line.

---

Related Topics