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

user_245549 0
Viewed 97954

Here is an example that I do not understand:

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

It seems to me that width: 460px is applied to all above mentioned classes. But why some classes are separated by a comma (,), and some just by a space?

I assume that width: 460px will be applied only to those elements which combine classes in the way mentioned in the CSS file. For example, it will be applied to <div class='container_12 grid_6'> but it will not be applied to the <div class='container_12'>. Is this assumption correct?

css-selectors css
9 Answers

Selectors combinations get different meanings - attached image explains easily

a) Multiple selectors separated by a comma(,) - Same styles are applied to all selected elements. 

div,.elmnt-color {
  border: 1px solid red;
}

Here border style is applied to DIV elements and CSS class .elmnt-color applied elements.

<!-- comma example -->
<div>
  Red border applied
</div>
<p class="elmnt-color">
  Red border applied
</p>

b) Multiple selectors separated by space – Those are called descendant selectors. 

div .elmnt-color {
  background-color: red;
}

Here border style is applied to CSS class .elmnt-color applied elements which are child elements of a DIV element.

<!-- space example -->
<div>
  Red border NOT applied
</div>
<p class="elmnt-color">
  Red border NOT applied
</p>
<div>
  Red border NOT applied    
  <p class="elmnt-color">
    Red border applied
  </p>
</div>

c) Multiple selectors specified without space - Here styles are applied to elements which meet all the combinations. 

div.elmnt-color {
  border: 1px solid red;
}

Here border style is applied only to DIV elements with a CSS class of .elmnt-color.

<!-- no space example -->
<div>
  Red border NOT applied
</div>
<p class="elmnt-color">
  Red border NOT applied
</p>
<div>
  Red border NOT applied    
  <p class="elmnt-color">
    Red border NOT applied
  </p>
</div>
<div class="elmnt-color">
  Red border applied
</div>

Details are attached at https://www.csssolid.com/css-tips.html

Note: CSS Class is just one of the CSS Selectors. These rules applies to all CSS Selectors (ex: Class, Element, ID etc.,).

user_106046460
Related