glenatron glenatron - 6 months ago 10
HTML Question

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

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

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');
 }