What is the difference between the selectors ".class.class" and ".class .class"?

Question

What is the different between .class.class and .class .class?

Answer 1

.class .class matches any elements of class .class that are descendants of another element with the class .class.

.class.class matches any element with both classes.

Answer 2

1. .name1.name2

   means a div or an element having both classes together, for example:

   <div class="name1 name2">...</div>
   

---

2. .name1 .name2

   means a div or an element which has a class name1 and any of its child nodes having class name2

   <div class="name1">
       <div class="name2">
           ...
       </div>
   </div>
   

Answer 3

.class1.class2

Element that has both class1 and class2 set within it's class attribute (like that: class="class1 class2")

.class1 .class2

Element with class2 that is a descendant of an element with class1 class

Answer 4

.class.class can also be used to avoid the use of !important in case that a higher specificity selector prevents your rule from being applied.

In this case there are not two classes in the HTML element. You only repeat the class which specificity you want to increase in the style (selector), like

(HTML) <div class="something">...</div>

(CSS) .something.something {}

Answer 5

.class1.class2: Selects all elements with class2 that is a descendant of an element with class1

.class1 .class2: Selects all elements with both class1 and class2 set within its class attribute

Lets see with code example:

.class1.class2{
  color: red;
}

.class1 .class2{
  color: blue;
}

<div class="class1 class2">
  Hi I am ".class1.class2" selector
</div>

<div class="class1">
  <p class="class2">
    Hi I am ".class1 .class2" selector
  </p>
</div>

Jsfiddle link for better ref: https://jsfiddle.net/srikrushna_pal/16dw3n0u/3/