.THIS .mycustomclass {
//css styling
}
will apply to all elements with the .mycustomclass attribute that are inside the component (because the .THIS attribute refers to the component).
If you remove the space, then the style will only apply to elements that have both the first and the second attribute. So this styling
.THIS.mycustomclass {
//css styling
}
will only apply to elements that have both the .THIS and .mycustomclass attributes. This only applies to top-level elements, because the Lightning Component Framework turns this:
<aura:component>
<div class="mycustomclass"> // <-- Top-level element
...
</div>
</aura:component>
into this:
<div class="cMyComponent mycustomclass">
NOTE :
.THIS.mycustomclass ===>there is no space in the selector as this rule is for top-level elements.
.THIS .mycustomclass ===>element is not a top-level element
.THIS .mycustomclass ===>element is not a top-level element
Hope this will help you
Hits: 503
Using a space between attributes indicates a descendant selector. To use your example, this means the style will apply to all elements with the second attribute that are inside an element with the first attribute. In other words, this styling