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:
-
.name1.name2
means a
div
or anelement
having both classes together, for example:<div class="name1 name2">...</div>
-
.name1 .name2
means a
div
or anelement
which has a classname1
and any of its child nodes having classname2
<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 {}