CODEWITHSUNDEEP
htmlcsstwitter-bootstraptabs
Benjamin Oats
Benjamin Oats

Reputation: 573

bootstrap css active tab inherit styles

I am building a tab system and with for each tab to have some style applied once active using the .acive class, I can do this like so 

.side-nav-cat li:nth-child(2).active:after {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    left: 100%;
    top: 0;
    border: 25px solid transparent;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    border-left: 25px solid #628179;
}

how ever I do not with to repeat all the same code on every nth-child

so I tried the following code so I only have to include border-left: 25px solid color; for each individual nth-child, I cant seem to get the nth-child to inherit all the styles from .side-nav-cat li:after .active

any idea why and how to fix it ? thanks.

.side-nav-cat li:after .active {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    left: 100%;
    top: 0;
    border: 25px solid transparent;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    border-left: 25px solid #628179;
}

.side-nav-cat li:nth-child(2).active:after {
    border-left: 25px solid red;
}

.side-nav-cat li:nth-child(2).active:after {
    border-left: 25px solid blue;
}

Upvotes: 0

Views: 121

Answers (1)

Tom
Tom

Reputation: 4292

Your first selector is looking for an element inside your <li> with the class of .active; rather than looking for an <li> with the class of .active.

The below should work;

.side-nav-cat li.active:after {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    left: 100%;
    top: 0;
    border: 25px solid transparent;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    border-left: 25px solid #628179;
}

.side-nav-cat li:nth-child(2).active:after {
    border-left: 25px solid red;
}

.side-nav-cat li:nth-child(2).active:after {
    border-left: 25px solid blue;
}

Upvotes: 1

Related Questions