CODEWITHSUNDEEP
htmlcsscss-selectors
qua1ity
qua1ity

Reputation: 623

Confused by CSS selector

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.

Upvotes: 3

Views: 188

Answers (4)

War10ck
War10ck

Reputation: 12508

This is due to the CSS specificity in the selectors that you're providing (or perhaps a third party library is providing). Here is a good resource to understand how CSS specificity and inheritance works.

Summary

Here is the key part from the linked article relating to how the different CSS selectors are related:

  • Element, Pseudo Element: d = 1 – (0,0,0,1)
  • Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
  • Id: b = 1 – (0,1,0,0)
  • Inline Style: a = 1 – (1,0,0,0)

I've included their examples below to help understand how this works:

  • p: 1 element – (0,0,0,1)
  • div: 1 element – (0,0,0,1)
  • #sidebar: 1 id – (0,1,0,0)
  • div#sidebar: 1 element, 1 id – (0,1,0,1)
  • div#sidebar p: 2 elements, 1 id – (0,1,0,2)
  • div#sidebar p.bio: 2 elements, 1 class, 1 id – (0,1,1,2)

Your Scenario

Now for your particular case. The first selector you use is .current which according to the information above has a specificity of:

.current (0,0,1,0)

As @Admir Geri noted in his answer, you also have a selector #slider div which has a specificity of:

#slider div (0,1,0,1)

Since the specificity of your second selector outweights that of the first, the second takes precedence and therefore you don't see your changes.

Your last selector #slider div.current has the following CSS specificity:

#slider div.current (0,1,1,1)

Since this score outweights that of any other selector. Your changes will be displayed when using this selector which is why you see them on the screen.

Upvotes: 1

Mahabub Islam Prio
Mahabub Islam Prio

Reputation: 1085

The way you did the CSS is quite confusing . I Think you know that , these CSS do respect a straight forward system for ID and Class . Javascript Does care about ID . And Browser has their specific advantages for ID's . But CSS doesn't care about ID and class. Not until you pull this type of confusion .

Never use #id element .class in your stylesheet if you have more than one same <element-tag> in your markup. This will ruin the style .

Upvotes: 1

Adam D. Ruppe
Adam D. Ruppe

Reputation: 25595

This is a specificity issue. #slider div has a specificity of 101. #.current has a specificity of of 10.

#slider div.current comes in at 111.

The selector with the highest specificity is the one used. Now, how did I get those numbers?

The CSS standard says that you add numbers with an infinitely large base together to get it. In practice, you can think of it as being digits.

Tag names are worth one point.

Class names or attribute values are worth ten* points.

ID names are worth 100 points.

(and !important things are worth 1000 by the way).

So you add them up and see which has the highest number. That's the rule that gets applied. If two rules come with the same specificity, the one that appears last in the source code is the one that is used.

  • I said ten here for simplicity, but remember that the spec said infinitely large base (though browsers actually use base 256, fun fact). So ten classes do NOT equal one ID: a single ID is more specific than any number of classes (in theory).

Upvotes: 3

Amir Geri
Amir Geri

Reputation: 409

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.

Upvotes: 5

Related Questions