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

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


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

Solution 2:

  1. .name1.name2

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

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

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

Solution 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

Solution 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 {}