CODEWITHSUNDEEP
htmlcssangular
StepUp
StepUp

Reputation: 38209

Applying class style from component style

I have a global style file called styles.scss and style for component detail.scss.

The global style file called styles.scss has the following class:

.one .two a{
     color: green
}

The style for component detail.scss also has style:

.fooColor { 
     color: orange
} 

#idColor {  
     color: yellow
}

However, the global style is applied to <a/> element:

<a class="fooColor">Hello, world!:)</a> <!-- Not OK. The color is green, but should
    be orange -->

If I set id, then the color is okay:

<a id="idColor">Hello, world!:)</a> <!--OK. the color is yellow -->

This is how I include component style:

@Component({
    selector: 'foo',
    templateUrl: 'foo.html',
    styleUrls: ['detail.scss'],
    encapsulation: ViewEncapsulation.Emulated, //also tried without 
        //"encapsulation: ViewEncapsulation.Emulated" and "ViewEncapsulation.None"
    moduleId: module.id
})

What can I do to apply class .fooColor from component style?

Upvotes: 1

Views: 85

Answers (2)

Martin Parenteau
Martin Parenteau

Reputation: 73761

You can add the anchor tag to make the selector more specific and override the global style:

a.fooColor { 
    color: orange;
}

Adding the component tag is another way to make the selector more specific:

foo a.fooColor { 
    color: orange;
}

Upvotes: 1

Mattia Astorino
Mattia Astorino

Reputation: 1585

.fooColor.fooColor {
    color: orange;
 }

This will increase class specificity over an attribute selection.

Upvotes: 1

Related Questions