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

CssCss Selectors

Css Problem Overview


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

Css Solutions


Solution 1 - Css

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

  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 - Css

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

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

Solution 5 - Css

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMuhammad UmerView Question on Stackoverflow
Solution 1 - CssesqewView Answer on Stackoverflow
Solution 2 - CssPbk1303View Answer on Stackoverflow
Solution 3 - CssMarcinJuraszekView Answer on Stackoverflow
Solution 4 - CssblanchartView Answer on Stackoverflow
Solution 5 - CssSrikrushnaView Answer on Stackoverflow