.class .class same classname selector in css

Question

Can anyone explain me what does the below css do?

.validate-error .validate-error {
  color: #cc2424;
  display: inline-block;
  margin-top: 5px;
}
.make-switch + .validate-error {
  margin-left: 10px;
}

In the first css i see the same class name used twice?. Is this css valid?. I came across this thread What is the difference between the selectors ".class.class" and ".class .class"? but unsure whether its applicable if we use the same class name twice?.

Answer 1

The first one styles child elements/descendant with the same class name:

<div class="validate-error">
    This color may be different from #cc2424
    <div class="validate-error">Has color #cc2424</div>
</div>

This means: The styles are applied/overwritten for child elements with the same class name.

---

The second one styles siblings:

<div class="make-switch"></div>
<div class="validate-error">Has left margin</div>
<div class="validate-error">Has no left margin</div>

That means: Only if .make-switch is followed by .validate-error the styles are applied to .validate-error.

Demo

Try before buy

Answer 2

.validate-error .validate-error {
  ...
}

This css targets a class .validate-error that is a descendant of .validate-error.

For example

<div class="validate-error">
    <div class="validate-error">
    </div>
</div>

Next css targets the class .validate-error when it is right next to .make-switch

.make-switch + .validate-error {
  ...
}