I'd like to figure out why my component's CSS is not applied. I have a very simple ui:outputtext:

<ui:outputtext value="My Text" class="boldtext" />

And the following CSS:

.THIS .boldtext {
    font-weight: bold; 

The ui:outputtext renders to:

<span class="uiOutputText cMyComponent boldtext" dir="ltr" data-aura-rendered-by="108:1;0" data-aura-class="uiOutputText cMyComponent ">My Text</span>

But unfortunately, component's text is not bold and I didn't see my component's CSS defined anywhere. Did I miss anything important?

P.S.: My component is related to the object:


Does that matter?


1.When you do not leave space between THIS and class Name denotes its top level element .This should work for you

.THIS.boldtext {
 font-weight: bold; 

2.When you leave space between THIS and class Name denotes its decendent or nested element has its style .

.THIS .boldtext {
   font-weight: bold; 

In your case its toplevel element so do not leave the space .

  • Isn't this nuance the same as it is with any CSS selector sans Lightning? I am not a CSS guru but I thought that was how it worked...stackoverflow.com/questions/10036156/…
    – Eric
    Aug 22 '16 at 4:27
  • 1
    @Eric you are right and i am not CSS guru as well .But what confuses me always is THIS notation and then each component has ability to do its own CSS . Aug 22 '16 at 4:32
  • 2
    Yea, just trying to learn through clarity.....I think of THIS just like the $(this) jQuery selector. Its a starting point and is a selector like any other. I may be thinking of it wrong but it helps me to keep a handle on it lol
    – Eric
    Aug 22 '16 at 4:34
  • Ha :) .Nice analogy and yes its like any other selector and i imagine THIS as the main container of the component :) Aug 22 '16 at 4:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.