0

I want to know what's the meaning of below code.

<div class="cls1 cls2">abcd
  <div class="cls2">
    adfffff
  </div>
</div>
.cls1 {
  background-color: yellow;
}

/*sample1
.cls1.cls2 {
  color: red;
}
*/

/*sample2*/
.cls1 .cls2 {
  color: red;
}

The two class of sample1 don't have an extra space. The sample2 do have an extra space.

Doese anyone know where can i find the official doc from mozilla?

Federico klez Culloca
  • 26,308
  • 17
  • 56
  • 95
oldmtn
  • 13
  • 1
  • 4

2 Answers2

0

sample2 will select all elements that have the class cls2 and are contained inside elemnts (not necessarilly direct children) that have class cls1. When there is a space between two selectors, it means that you are trying to select any element that is direct or not, child (cls2) of the first element (cls1)

sample1, on the other hand will try to select any element that has both class cls1 and cls2

kapantzak
  • 11,610
  • 4
  • 39
  • 61
0

.cls1.cls2(sample1) this css style will run if div have both cls1 and cls2 class

<div class="cls1 cls2">
</div>

.cls1 .cls2(sample2) if there is space between two class that means you are selecting any two classes that parent div have class .cls1 and child div have class .cls2. we are using space so that child div get the style not parent div who have class .cls2 

<div class="cls1">
  <div class="cls2">
  </div>
</div>
Preeti
  • 71
  • 4