Vaguely with 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 has a class named "current" and the div I want to select. Divas are located on top of each other 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, one with the class "current" z-index "2". The selector I'm using for this:
.current {
z-index: 2;
}
But that doesn't seem to work, thus the image won't be displayed on top. But if I instead write the selector like this:
#slider div.current {
z-index: 2;
}
Now it works.
And I'm a little confused about this, do these two selectors basically work the same? What's the difference between them in this case?
Made a jsfiddle from this https://jsfiddle.net/x1L4tfw4/5/ If you remove the "#slider div" part from the css selector you can see the difference.
source to share
This is a specificity issue. #slider div
has a specificity of 101. #.current
has a specificity of 10.
#slider div.current
included in 111
.
The selector with the highest specificity is used. Now how did I get these numbers?
The CSS standard says that you add infinitely large numbers to get it. In practice, you can think of it as numbers.
Tag names are one dot.
Class names or attribute values are worth 10 * dots.
Name IDs are worth 100 points.
(and by the way, important things cost 1000).
So you add them and you see who has the highest number. This is the rule that applies. If two rules have the same specificity, the one that appears last in the source code is the one that is used.
- I've said ten here for simplicity, but remember that the spec had an infinitely large base (although browsers actually use a base 256, fun fact). So ten classes are NOT equal to one ID: one identifier is more specific than any number of classes (in theory).
source to share
This is due to the specifics of the CSS in the selectors you provide (or possibly a third party library provides). Here is a good resource for understanding how CSS specificity and inheritance work.
Summary
Here's the key part from a linked article regarding 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 have provided examples of them below to understand how it 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 script
Now for your specific case. The first selector you choose .current
, which, according to the information above, is specific:
.current (0,0,1,0)
As @Admir Geri pointed out in his answer, you also have a selector #slider div
that is specific:
#slider div (0,1,0,1)
Since the specifics of your second selector are superior to the first, the second takes precedence and therefore you see no change.
Your last selector #slider div.current
has the following CSS specification:
#slider div.current (0,1,1,1)
Because this figure is superior to any other selector. Your changes will show up when you use this selector, so you see them on screen.
source to share
The way you did the CSS is pretty confusing. I think you know that these CSS really respect the ID and class direct access system. Javascript Takes care of the ID. And the browser has its own special advantages for ID. But CSS doesn't care about ID and class. Until you pull this confusion.
Never use #id element .class
in your stylesheet if you have more than one in your markup <element-tag>
. This will destroy the style.
source to share