What does comma in CSS definition mean

Question

What does this type of CSS definition mean? Note the first two classes are separated without comma but the last two are separated with comma.

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

Please do some research before asking a question here. http://www.w3.org/TR/css3-selectors/ https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors — Matt Ball, Jun 02 '15 at 16:07

score 6 · Accepted Answer · answered Jun 02 '15 at 16:04

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'.

score 4 · Answer 2 · answered Jun 02 '15 at 16:05

4

It is shortcut of

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

You should use it to group your CSS

answered Jun 02 '15 at 16:05

LJ Wadowski

5,997
6
39
75

score 2 · Answer 3 · answered Jun 02 '15 at 16:06

2

As explained above, it helps group single CSS declarations across multiple selectors, and can help save file size (which could come in very handy as your CSS file gets larger!) and make things a bit clearer to read.

For example, you could have multiple selectors with the same declarations:

.div1 {
    color: red;
}
.div2 {
    color: red;
}
.div3 {
    color: white;
}
.div4 {
    color: white;
}

And you can shorten this by using:

.div1,.div2 {
    color: red;
}
.div3,div4 {
    color: white;
}

answered Jun 02 '15 at 16:06

Lee

4,090
5
22
63

1

Wouldn't this make more sense as a comment if it is just adding to the other answers? – Anonymous Jun 02 '15 at 16:07
2

Why haven't you said that to any of the other answers? – Lee Jun 02 '15 at 16:08
2

In fairness, it would be difficult to provide that much code - legibly - in the comment-space. – David Thomas Jun 02 '15 at 16:09
2

And because I feel as though my answer provides something much more important than no answers have (about the file size). – Lee Jun 02 '15 at 16:09
@Lee I was just saying that since you were specifically referencing the other answers, it may make more sense as a comment. What was added could fit inside a comment since the difference between your two examples was already demonstrated. It was in no way intentionally malicious or rude, so please don't take it as such. I was just making a suggestion. – Anonymous Jun 02 '15 at 16:14

rajesh · Answer 4 · 2015-06-02T16:17:00.500

1

The comma is used for grouping, when the same rule applies for several selectors. Each selector is completely independent of the others.

The space is used for select any .layout that are inside .container, even if there are other elements between them.

For your question, the answer is:

you grouping .layout which is inside the .container class and .groupContainer for both the width value is 100%.

edited Jun 02 '15 at 16:17

answered Jun 02 '15 at 16:07

rajesh

1,451
10
21

What does comma in CSS definition mean

4 Answers4