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:

<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


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


The code in .css file:

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


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

4 Answers 4


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

.THIS .test .slds-tabs_scoped__nav {
background-color: blue;
  • Thank you, is there a way to do that using id ? and how ? Commented Dec 11, 2018 at 18:57
  • You can include an id but you still have to target the .slds-tabs_scoped__nav class. If you add an id of test to your outer div you could then do this: .THIS#test .slds-tabs_scoped__nav {background-color: blue;} Commented Dec 11, 2018 at 19:14

You can set the active element as

.THIS ul > li.slds-tabs_scoped__item.slds-is-active > a {
   background-color: blue ;


enter image description here

You can use chrome inspect to see which selectors to use. Its easy and works magic. I use it every time

enter image description here

  • 2
    Boo !important flag.
    – Adrian Larson
    Commented Dec 11, 2018 at 15:56
  • Thank you, is there a way to do that using id ? and how ? Commented Dec 11, 2018 at 18:57

You need a space between .THIS and .test. Without the space, you're selecting only the top element .THIS which must ALSO have class test. With the space you'll select child elements of .THIS. It's a subtle but critical difference.

.THIS.test  // element that matches BOTH '.THIS' AND '.test'  
.THIS .test // children of .THIS that match '.test'

I'm not 100% certain whether .THIS refers to your first div.slds-size_1-of-4 or some wrapper element around your component, but either way it doesn't find class='test' on that element, so there are no matches. And that's why it's not matching the child tabset element you're intending without the space in the CSS selector.

  • Thank you, is there a way to do that using id ? and how ? Commented Dec 11, 2018 at 18:56
  • It works the same way with ID. If test was an id instead of a class then: .THIS #test
    – Dan Puza
    Commented Dec 11, 2018 at 21:24

These solutions did not appear to work for lightning-tabset in lwc. Interestingly aura's tabset has a class attribute, while lwc tabset does not. What does that tell us about why the same CSS override solutions do not work for lwc today?

Borrowing from this solution this seems to work with lwc's tabset. It admittedly feels very hacky.

renderedCallback() {
    const style = document.createElement('style');
    style.innerText = `c-vertical .slds-vertical-tabs__nav {
        background-color: aliceblue;

lwc playground

You must log in to answer this question.

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