You need to sign in to do that
Don't have an account?
jojoforce
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 }
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
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 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 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: into this:
If my summary doesn't make sense, I suggest you just read the whole article. I hope this helps!