Confused by CSS selector

Question

So.. I have this code:

<div id="slider">
    <div class="current"><img id="img1" src="http://i.imgur.com/gWGqZly.png" /></div>
    <div><img id="img2" src="http://i.imgur.com/mC1FD81.png" /></div>
    <div><img id="img3" src="http://i.imgur.com/HFx9mqa.png" /></div>
</div>

As you can see the first div have a class named "current" and that's the div that i want to select. The divs are positioned on top of eachother with position: absolute;

My CSS:

#slider div {
    position:absolute;
    z-index: 0;
}
#slider div.previous {
    z-index: 1;
}
#slider div.current {
    z-index: 2;
}

I'm trying to give the first div, the one with class "current" a z-index of "2". The selector i use for doing this is:

.current {
   z-index: 2;
}

But that doesnt seem to work, that way the image wont appear on the top. But if i instead write the selector this way:

#slider div.current {
   z-index: 2;
}

Now it works.

And im a bit confused by this, doesnt those two selectors basically work the same way? What's the difference between them in this case?

Made a jsfiddle out of this https://jsfiddle.net/x1L4tfw4/5/ If you remove the "#slider div" part from the css selector you will see the difference.

Answer 1

You haven't stated that you have the #slider div selector in your CSS as-well. This overrides the .current selector because its more specific.