How to override parent :nth-of-type in child element?

Question

I am using a stylesheet that looks a bit like this:

.base-slider {
    width: 100%;

    .ui-state-default {
        border: none;
    }

    .ui-state-default:nth-of-type(1) {
        background: url('left-end-arrow.png');
    }

    .ui-state-default:nth-of-type(2) {
        background: url('right-end-arrow.png');
    }

    /* loads of other style stuff */
}

.secondary-slider {
    .ui-state-default {
        background: url('single-point-arrow.png');
    }
}

Then in my html I have something like:

<div id="slider" class="base-slider secondary-slider">
   <a href="#" class="ui-state-default">X</a>
</div>

The problem I have is that I am seeing the 'left-end-arrow.png' on my secondary-slider element rather than the 'single-point-arrow.png' which is what I was expecting

I am guessing that is because nth-of-type(1) makes the base-slider selector more specific than the child one. Is this correct? And if so, is there any CSS way to say "ignore any previously added pseudo-classes on this element"?

Answer 1

You could use :nth-of-type(n) to override the previous pseudo classe styles like this :

DEMO

 .secondary-slider .ui-state-default:nth-of-type(n) {
     background: url('single-point-arrow.png');
 }

OR

You can make the second CSS style more specific as you have two calsses on your container, you can use both like this :

DEMO

 .base-slider.secondary-slider .ui-state-default {
     background: url('single-point-arrow.png');
 }