1

Is there a way to apply a CSS rule to a specific class only if it is within another?

For instance, if I wanted to make the background black for a class black within the class container but not set the background for all my black classes, the equivalent with a normal HTML/CSS file would be: 

.container .black{
    background: #000000; 
}

I haven't come across any syntax that replicates with behavior with Aura components. Any help would be appreciated.

Improve this question

1 Answer 1

Reset to default
0

It's the exact same thing in Aura, except you prefix the CSS selector with .THIS (which will be populated with a unique CSS identifier when rendered).

.THIS .container .black {
  background-color: black;
}

If container happens to be a top-level element, do not include the first space:

.THIS.container .black {
  background-color: black;
}
Improve this answer
3
  • I've found this works when styling a class within an element, ex) .THIS div .black {} but it doesn't work for a class within a class, ex) .THIS .class1 .black{}
    – Khan
    Commented Jul 28, 2019 at 5:10
  • @Khan It definitely does work. I even wrote a small app in my Dev Org to make sure it does. There is probably a simple mistake in your code somewhere.
    – sfdcfox ♦
    Commented Jul 28, 2019 at 5:23
  • Fair enough! I'll go back and check everything. Thanks!
    – Khan
    Commented Jul 28, 2019 at 5:35

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .