difference between img.slider and .slider

Question

hi everyone,

I was just curious: whats the difference between img.slider and .slider (when all of my images have class "slider").

I noticed that when i tried to target the images with class name "slider" via writing

.slider { margin-top: 10px; }

^ did not work

img.slider { margin-top: 10px; }

^ did work.

Why is this the case? Thanks!

Answer 1

http://w3.org/TR/CSS21/cascade.html#specificity

Answer 2

As reisio's link indicates, the more "specific" CSS rule overrides a less specific rule. Also, if you were to have the "slider" class on any element other than img, the img.slider rule would not apply.

Answer 3

Specificity rules in CSS state that selectors with lower specificity, such as .slider, are overruled by selectors with higher specificity, such as img.slider. If you would like to learn more about how specificity is calculated and applied, consider reading the W3C section on specificity, at http://www.w3.org/TR/CSS21/cascade.html#specificity