[SalesForce] How to override CSS of Lightning Component

I want to change the styling of several Lightning Component elements such as:
Changing the background of navigation of Tabset from light grey to blue:

From thisStandard Tabset

To this
The Tabset I want to do (I did that using inspect element)

The code I written in .cmp file:

<aura:component>
<div class="slds-size_1-of-4 slds-p-bottom_xx-large">
    <lightning:tabset variant="scoped" class="test">
        <lightning:tab label="Item One">
            <aura:set attribute="body">
                Hello World

            </aura:set>
        </lightning:tab>

        <lightning:tab label="Item two">
            <aura:set attribute="body">
                Bye World

            </aura:set>
        </lightning:tab>
    </lightning:tabset>
</div>

The code in .css file:

.THIS.test {
background-color: blue !important;

}

But it won't change, can anyone advise me please ?

Best Answer

You need to target the <ul> element that holds the tabs:

.THIS .test .slds-tabs_scoped__nav {
background-color: blue;
}
Related Topic