function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
jojoforcejojoforce 

Difference between .THIS.mycustomclass versus .THIS .mycustomclass?

In lightning components, what is the difference between .THIS.mycustomclass versus .THIS .mycustomclass?
  
.THIS .mycustomclass {
   //css styling
}


.THIS.mycustomclass {
  //css styling
}



 
Krishnamoorthi PeriasamyKrishnamoorthi Periasamy
Pleaes go thru this, it may help you ....If you think this answer is helful to solve, please mark it as "Solved'. Thanks
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_css.htm...

 .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
Charisse de BelenCharisse de Belen
Hello,

Krishnamoorthi's answer is a good answer, but if you are interested in knowing the reason why, here is a helpful article I found that explains it: http://www.topalovich.com/2016/12/why-does-it-matter-if-i-use-a-space-between-this-and-a-css-class-name-in-the-lightning-component-bundle-style-resource/


Here is a summary:
In Lightning Components, the .THIS attribute refers to the component itself. This is important to remember. In this example, let's say that the component is called "MyComponent".

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


If my summary doesn't make sense, I suggest you just read the whole article. I hope this helps!