Trying to link SCSS to tab class name

0
Hi all, I’m trying to link the following code below to the tab container class name “HomeWWMTab” but nothing seems to work. The code is working fine but is changing all tab containers on the app instead of just the one I want.   .mx-tabcontainer { &> .mx-tabcontainer-tabs { border-bottom-color: #00000061; margin-bottom: 0px; li:nth-of-type(1) { &.active>a, &.active>a:hover, &.active>a:focus { background-color: #e6e6fa; border-right-color: #00000061; border-top-color: #00000061; font-weight: bold; } } li:nth-of-type(2) { &.active>a, &.active>a:hover, &.active>a:focus { background-color: #7fccd2; border-right-color: #00000061; border-top-color: #00000061; border-left-color: #00000061; font-weight: bold; } } } }   Is there a way to limit this to the tab container with the class name “HomeWWMTab” if so please let me know. Thanks :)
asked
2 answers
0

This should be the selector you are looking for, provided that it is the only tabcontainer on the page:

*Edited version*
.mx-tabcontainer.HomeWWMTab{
    &> .mx-tabcontainer-tabs {

Does this work?

If not try a less specific one:

.HomeWWMTab{
    &> .mx-tabcontainer-tabs {

 

answered
0

Tim’s second suggestion seems like it would work fine and still be general enough to use in other spots in the app if you wanted to. Perhaps a more pedantically correct version would be:

.HomeWWMTab.mx-tabcontainer {
    &> .mx-tabcontainer-tabs {

            border-bottom-color: #00000061;
            margin-bottom: 0px;
        
            li:nth-of-type(1) {

                &.active>a,
                &.active>a:hover,
                &.active>a:focus {
                    background-color: #e6e6fa;
                    border-right-color: #00000061;
                    border-top-color: #00000061;
                    font-weight: bold;
                }
            }
            li:nth-of-type(2) {

                &.active>a,
                &.active>a:hover,
                &.active>a:focus {
                    background-color: #7fccd2;
                    border-right-color: #00000061;
                    border-top-color: #00000061;
                    border-left-color: #00000061;
                    font-weight: bold;
                }
            }
    }
}

 

answered