CODEWITHSUNDEEP
jquerycss
user1033882
user1033882

Reputation: 123

Apply to nth-childs but not divs

I am using the nth-child parameter to put background on some elements inside a div. I am using bootstrap and i wanted to also show a tooltip when the user is above an element. Currently my css is like this:

.br-widget a.br-active:nth-child(1),
.br-widget a.br-selected:nth-child(1) {
    background: #FB0A01;
}

.br-widget a.br-active:nth-child(2),
.br-widget a.br-selected:nth-child(2) {
    background: #F94E00;
}

.br-widget a.br-active:nth-child(3),
.br-widget a.br-selected:nth-child(3) {
    background: #F96400;
}

.br-widget a.br-active:nth-child(4),
.br-widget a.br-selected:nth-child(4) {
    background: #FA9B01;
}

.br-widget a.br-active:nth-child(5),
.br-widget a.br-selected:nth-child(5) {
    background: #FAB800;
}

.br-widget a.br-active:nth-child(6),
.br-widget a.br-selected:nth-child(6) {
    background: #F9D100;
}

.br-widget a.br-active:nth-child(7),
.br-widget a.br-selected:nth-child(7) {
    background: #EFE601;
}

.br-widget a.br-active:nth-child(8),
.br-widget a.br-selected:nth-child(8) {
    background: #E7E504;
}

.br-widget a.br-active:nth-child(9),
.br-widget a.br-selected:nth-child(9) {
    background: #C3E60C;
}

.br-widget a.br-active:last-child,
.br-widget a.br-selected:last-child {
    background: #47E21A;
}

The problem that i am facing is that the tooltip is creating a div AFTER the element that it's creating it, so its breaking up my css since it's becoming a child of the initial div (br-widget).

Is there a way i can discard a child in the css if its a div ? or even if that child has a class of "tooltip" on it. Like something like this:

.br-widget a.br-active:nth-child(9):not(div),
.br-widget a.br-selected:nth-child(9):not(div) {
    background: #C3E60C;
}

Upvotes: 0

Views: 56

Answers (1)

drosam
drosam

Reputation: 2896

You can use :nth-of-type instead of :nth-child. With :nth-of-type you only count element of that type, not every child.

Upvotes: 1

Related Questions