Different background colours for individual tabs

0
Hi everyone, I have a page the has a tab container. On each of these tabs the background is a different colour, I was wondering if there is any possible way to make the active tab the same colour as the background for that particular tab.  I’ve included some screenshots to show what I’m trying to do. So I’d like it to change the background colour of tab to the same as the background. In the examples above I’ve just used Google Chromes console to change the background of the tab to each colour but I can’t seem to find a way to do this on SCSS. Any help would be appreciated.
asked
3 answers
1

you could also count with sass Class:nth-child(1) background blue

it would be slightly more complex than this, but just as an example

answered
2

The active tab can be found because it has a <li> element with the class “active”. So if you create a class for your tab container, you need to apply the styling to the active child elements.

That is the first step. Maybe someone else can help with defining the color :-)

answered
1

Jason replied to another question I posted similar to this one with the following 

“to make it different per tab, you can change the sass shown and add a nth selector”

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

        li:nth-of-type(1) {

            &.active>a,
            &.active>a:hover,
            &.active>a:focus {
                background-color: red;
            }
        }
        li:nth-of-type(2) {

            &.active>a,
            &.active>a:hover,
            &.active>a:focus {
                background-color: blue;
            }
        }
    }
}

I tried this SCSS on my app and it make each tab a different colour when you click on it.

answered