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

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

More Related Contents:

  1. Is there a CSS selector for elements containing certain text?
  2. What does the “~” (tilde/squiggle/twiddle) CSS selector mean?
  3. nth-of-type vs nth-child
  4. How to select a range of elements in repeated pattern
  5. css3 nth of type restricted to class [duplicate]
  6. wildcard * in CSS for classes
  7. How can I write a ‘:hover’ condition for ‘a:before’ and ‘a:after’?
  8. CSS Child vs Descendant selectors
  9. Matching an empty input box using CSS
  10. What is the difference between a pseudo-class and a pseudo-element in CSS?
  11. What is the difference between :first-child and :first-of-type?
  12. not:first-child selector
  13. Specify multiple attribute selectors in CSS
  14. SASS: randomly pick background-image from a list
  15. What does “i” mean in a CSS attribute selector?
  16. Is there a workaround to make CSS classes with names that start with numbers valid? [duplicate]
  17. What does + mean in CSS? [duplicate]
  18. CSS Selector for nth range?
  19. CSS selector (id contains part of text)
  20. How do I get the nth child of an element using CSS2 selectors?
  21. What’s the difference between CSS3’s :root pseudo class and html?
  22. Is the :before pseudo-element allowed on an input[type=checkbox]?
  23. CSS 3 nth of type restricted to class [duplicate]
  24. CSS select multiple descendants of another element
  25. Select all ‘tr’ except the first one
  26. What are the rules around whitespace in attribute selectors?
  27. CSS – First child without certain class
  28. CSS select first element with a certain class
  29. Correct terms and words for sections and parts of selectors
  30. What is the difference between pseudo-classes and pseudo-elements?

Leave a Comment